'{}' 유형을 '{title: string; }' 유형에 할당할 수 없습니다.

'{}' 유형을 '{title: string; }' 유형에 할당할 수 없습니다.

아래 TypeScript 코드에 대한 아래 오류가 발생했습니다.

'{}' 유형을 '{title: string; text: string; }' 유형에 할당할 수 없습니다.'{}' 유형에 'title' 속성이 없습니다.

아래와 같이 "기사"를 선언하므로,

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

당신은 컴파일러에게 말했습니다.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;

그 이유는 아주 간단하게 당신이 주장하기 때문입니다.article했어야 했습니다title그리고.text필드, 그러나{}Doesn't.문제를 해결하는 방법은 표시할 내용에 따라 다릅니다.article에는 초기 값이 있지만 가장 간단한 해결 방법은 필드를 선택적으로 설정하는 것입니다.{ title?: string, text?: string }.

지나가는 사람들을 위해 세 번째 옵션을 추가하겠습니다. 제정신인 기본값을 추가합니다.

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

여기에는 해당되지 않을 수도 있지만 일반적으로 개체를 초기화하여 유형을 충족하고 가능한 한 엄격한 유형을 갖는 것이 좋습니다.

솔루션이 언급되었지만 위에서 설명하지 않았기 때문에 다음 작업을 수행할 수 있습니다.

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

빈 개체가 허용되는 경우 속성은 선택 사항입니다.항상 이러한 속성을 포함하는 개체에 대해 계획하고 구조를 정의하려는 경우 다음과 같이 선언합니다.

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

코드에서 개체 값이 정의되기 전에 개체를 사용할 수 있는 상황은 없습니다.

언급URL : https://stackoverflow.com/questions/42091602/type-is-not-assignable-to-type-title-string-text-string