类型"{}"不能分配给类型'{title:string; text:string; }"

Question

我收到以下TypeScript代码的错误,

类型'{}'不能分配给'{title:string; text:string; }"."{}"类型中缺少属性"标题".

因为我在下面声明"文章",

article: { title: string, text: string } = {};

它是什么原因以及如何解决这个问题？谢谢!

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'article-editor',
    template: `
    <p>Title: <input [formControl]="titleControl"></p>
    <p>Text: <input [formControl]="textControl"></p>
    <p><button (click)="saveArticle()">Save</button></p>
    <hr />
    <p>Preview:</p>
    <div style="border:1px solid #999;margin:50px;">
      <h1>{{article.title}}</h1>
      <p>{{article.text}}</p>
    </div>
  `
})
export class ArticleEditorComponent {
    article: { title: string, text: string } = {};

    titleControl: FormControl = new FormControl(null, Validators.required);
    textControl: FormControl = new FormControl(null, Validators.required);
    articleFormGroup: FormGroup = new FormGroup({
        title: this.titleControl,
        text: this.textControl
    });

    saveArticle() {
        if (this.articleFormGroup.valid) {
            this.article = this.articleFormGroup.value;
        } else {
            console.log('Missing field(s)!');
        }
    }
}

Answer 1

你告诉编译器article的类型的{ title: string, text: string },但那么你指定一个空的对象({}),同时缺少title和text,所以编译器会抱怨.

您可以使用类型断言告诉编译器它没问题:

let article: { title: string, text: string } = {} as { title: string, text: string };

您还可以将其放入类型别名中:

type MyType = { title: string, text: string };
let article: MyType = {} as MyType;

当你使用类型断言时,你可以简单地:

let article = {} as MyType;

Answer 2

原因很简单,你声称article应该有title和text田地,但{}没有.如何解决它取决于你想要显示什么同时article具有初始值,但最简单的解决方法是使字段可选:{ title?: string, text?: string }.