Property ‘users’ has no initializer and is not definitely assigned in the constructor. 【TypeScript始めたてでつまづいた備忘録】

キャベツ村代表エンジニアのヒーコです。

今回は、TypeScriptでつまづいたエラーの解決策について書いていきます。

TypeScriptとVueでフロントを構築していて、webpackビルド時にこんなエラーが発生しました。

TS2564: Property 'users' has no initializer and is not definitely assigned in the constructor.

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

以下、実際のソースコードです。

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({
  components: {}
})
export default class Table extends Vue {
  @Prop()
  private users: Array<any>;
・
・
・

原因

TypeScriptのバージョン2.7から新しい機能が追加されたことによるエラーだったみたいです。

http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html

クラスの各インスタンスプロパティがコンストラクター本体、またはプロパティの初期化によって初期化されることをチェックする機能みたいです。

解決策

ソースコード

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({
  components: {}
})
export default class Table extends Vue {
  @Prop()
  private users!: Array<any>;  //ここを修正しました

プロパティを間接的に初期化できる特定のシナリオがあり、その場合、プロパティに明確な割り当てアサーション修飾子を使用できるようです。

明確な割り当てアサーションは、！インスタンスプロパティと変数宣言の後に配置して、変数が実際にすべての意図と目的に割り当てられていることをTypeScriptに伝えてくれるそう。。。

一旦これにて、エラーは解消できました。

もっとTypeeScriptべんきょーします！

最後まで読んでいただきありがとうございました。