web-dev-qa-db-ja.com

Angularプロパティデコレータが最新のVSCodeで「プロパティ 'x'には初期化子がありません...」エラーをスローする

Angularガイド here を参照して、このサンプルコードを使用します。

Visual Studioコードを最後に更新してから、Angularデコレータ（.tsなど）で装飾されたコンポーネントのプロパティの下にあるAngularコンポーネント@Inputファイルに赤い下線を付け始めました。次のコード例では、@Input() hero: Hero;および@Input('master') masterName: string;の下に赤い下線が表示されます。

import { Component, Input } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

赤い下線のエラーメッセージは次のとおりです。

[ts]プロパティ 'masterName'には初期化子がなく、コンストラクターで確実に割り当てられていません。

なぜこれらが突然現れたのかはわかりません。私がしたいことではないは、いくつかの使い捨て値に初期化することです、これはstringでは問題ないかもしれませんが、Hero私は間違いなくこれを行う必要はありません。

前もって感謝します！

angulartypescriptvisual-studio-code
9
Kyle V.

Tsconfig.jsonファイルをチェックして、strictPropertyInitializationがfalseであることを確認します。

詳細については、このドキュメントの「厳密なクラス初期化」セクションを参照してください。 http://www.typescriptlang.org/docs/handbook/release-notes/TypeScript-2-7.html

注：ある場合

"strict": true,

tsconfig.jsonファイルに設定すると、この新しいstrictプロパティが自動的に設定され、これらの通知がすべて表示されます。

したがって、次のように変更できます。

"strict": true,
"strictPropertyInitialization": false,
30
DeborahK

TypeScript 2.7以降、答えは Definite Assignment Assertions を使用することです。

角度構文

export class HeroChildComponent {
    @Input('master') masterName!: string;

AngularJS + TypeScript構文

export class HeroChildComponent {
    public masterName!: string;

これにより、特定のプロパティを「そうですね、これがここにあると宣言するので、そのままにしておく」ことができます。このようにして、真であることがわかっていて、初期化をチェックするデフォルトの動作がデフォルトでオンになっている場合にオプトアウトできます。

ただし...このコメントの時点で2018年2月26日Webstormと他のIDEは有効な構文として受け入れないため、これを回避する唯一の方法は、tsConfigで「strictPropertyInitialization」をオフにすることです。

Webstorm 2018 EAP 181.3741 には、サポートに必要なアップデートが含まれていると記載されています Definite Assignment Assertions

this thread による判断最新のVSCodeは Definite Assignment Assertions をサポートしていると思います

11
George