TypeScriptで「erasableSyntaxOnly」が有効で構文が使用できないエラーについて

エラーメッセージ

下記のような構文エラーについて記述します。

export class Todo {
  constructor(
    public id: string,
    public title: string,
    public done: boolean,
  ) { }
}

エラー内容

'erasableSyntaxOnly' が有効な場合、この構文は使用できません。ts(1294)

この書き方をすると、コンストラクタの引数にpublicを付けるだけで自動的にフィールドが作られ、代入も行われます。
ですが、erasableSyntaxOnlyが有効(true)の時は挙動が変わります。

考えられるエラーの原因

TypeScript の設定 (tsconfig.json)で verbatimModuleSyntaxまたはerasableSyntaxOnlyが有効(true)になっている。

安全な型の宣言方法

export class Todo {
  public id: string;
  public title: string;
  public done: boolean;

  constructor(id: string, title: string, done: boolean) {
    this.id = id;
    this.title = title;
    this.done = done;
  }
}

上記は「パラメータプロパティ」を使わずに、フィールドを先に宣言してから constructor 内で代入しております。
「erasableSyntaxOnly」が有効な時は、パラメータプロパティ構文は型安全のために書かれることもあるが、JSに変換するとランタイムで必要な初期化コードが生成されるため、型だけとしては消せないです。

なので上記のように、明示的に宣言することでエラーを防ぐことができます。

補足

erasableSyntaxOnly :trueの時は型の情報がコンパイル後に削除されます。そして実際にjavascriptで動作するコードは残ります。

ですが、パラメータプロパティは型安全のための構文ではありますが、同時にjavascriptの初期化コードを生成する役割もあります。
だから型だけの情報としては消すことができず(erasableSyntaxOnlyではパラメータプロパティ構文を扱えないから)エラーになります。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！