Question

我收到以下TypeScript代码的错误

输入＆＃39; {}＆＃39;不能分配给＆＃39; {title：string; text：string; }＆＃39 ;.财产＆＃39;标题＆＃39;类型＆＃39; {}＆＃39;。
中缺少

正如我所声明＆＃34;文章＆＃34;如下，

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

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

＆＃13;

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)!');
        }
    }
}

＆＃13;

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 }。

Answer 3

我将在此处为路过的人添加第三个选项：添加合理的默认值。

const article: { title: string, text: string } = {
    title: "default title",
    text: "default text"
};

这可能不适用于此处，但通常认为初始化对象以满足其类型和具有尽可能紧凑的类型是一种很好的形式。

Answer 4

由于上面提到了解决方案，但上面没有写明，您可以这样做：

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

如果允许使用空对象，则属性为可选。如果您计划始终包含这些属性的对象，并且只想定义结构，则只需声明它：

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

在您的代码中，没有可能在定义对象的值之前使用它的情况。

输入＆＃39; {}＆＃39;不能分配给＆＃39; {title：string; text：string; }＆＃39;

4 个答案: