【Angular】プロパティに初期化子がなく、コンストラクターで明確に割り当てられていません。【TypeScript】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回はプロパティに初期化子がなく、コンストラクターで明確に割り当てられていません。について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

プロパティに初期化子がないというエラーを解消出来る

煩わしいエラーを解消しよう！

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

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

“no initializer and is not definitely”

AngularでTypeScriptを触っているとこういったエラーが発生することがあります。

これはTypeScript2.7から導入されたクラスプロパティの初期化をチェックする
strictPropertyInitializationというオプションによるものです。

比較的新しいバージョンの際に発生する現象なので
教材やサンプルコードをコピペしたのになぜか動かない！
という状況が頻発します。

今回はこのエラーの解決策を3つ紹介します。

このオプションはTypeScriptにおいては優秀だけど
Angularの仕様と合わないので今回は強引に解消するよ！

tsconfig.jsonでオフにする☆オススメ

tsconfig.jsonというTypeScriptの設定ファイルからでオプションをオフにします。

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "module": "es2020",
    "strictPropertyInitialization": false, //これを追記
    "lib": ["es2020", "dom"]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

この設定をしておくだけでエラーは解消されるよ！

Non-nullアサーションオペレータ”!”を使う

// textがundefinedでないことを明示
text!: String;

設定が面倒くさいときにはこれがオススメ！

undefinedを許容する

// undefinedを許容
text: String | undefined;

この記述はundefinedを許容するので、エラー自体は消えるよ！

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram