TypeScript の definite assignment assertion operator の話

TypeScript の class では、プロパティは初期化指定子かコンストラクタで初期化していないとエラーになります。そのため、以下のように記述する必要があります。

class Hoge {
  value1: string = 'a';
  value2: number;
  // value3: boolean; // ERROR: Property 'value3' has no initializer and is not definitely assigned in the constructor.

  constructor() {
    this.value2 = 1;
  }
}

しかし、たとえば Vue.js の Component class の props のように Vue.js 側で初期化するプロパティについては少々困ります。この確実に初期化されるが初期化指定子やコンストラクタで初期化はしないという状況の時に、明確な割り当てアサーション演算子(definite assignment assertion operator) ! ¹を使用することでこの問題を回避できます。

@Component
export default class HogeComponent extends Vue {
  @Prop({ type: String, required: true }) value1!: string;
  @Prop({ type: Number, required: true }) value2!: number;
  @Prop({ type: Boolean, required: true }) value3!: boolean;
}

---

1. 明確な割り当てアサーション(definite assignment assertion) | TypeScript入門『サバイバルTypeScript』↩