プライベート構文やアクセサなど、TypeScriptのクラス構文に関する変更点を解説

ますます便利になるTypeScript！ バージョン3からの変更点と総まとめ　第5回

　その登場以来、順当にアップデートを重ねているTypeScriptに関して、バージョン3から5.2までの変更点をまとめて紹介するのが、本連載です。前回は、型の絞り込みに関する変更点を紹介しました。今回は、クラス構文に関する変更点を紹介します。

JavaScriptのプライベート構文への対応

　本連載は、TypeScriptのバージョン3から5.2までのアップデート内容を、テーマごとにバージョン横断で紹介する連載です。第5回である今回紹介するのは、クラス構文に関する変更点です。そのクラス構文において、一番大きな変更点は、JavaScriptのプライベート構文への対応です。

JavaScriptのプライベートフィールドとは

　JavaScriptのフィールドは、その最初期からパブリックなものでした。それを補うように、TypeScriptでは独自のアクセス制限としてprivateとprotectedが導入され、利用されてきています。このプライベートフィールドの仕組みが、ES2022でJavaScriptに導入されました。この流れを受けて、TypeScriptでも、JavaScriptのプライベートフィールドの仕組みを、TypeScriptのprivateとは別に、バージョン3.8で先行導入しました。

　JavaScriptのプライベートフィールドの仕組みは、「#」を使います。例えば、リスト1のようなコードです。

リスト1：#によるプライベートフィールドの例

class BMIData {
  #name: string;  // (1)
  #height: number;  // (2)
  #weight: number;  // (3)
  constructor(name: string, height: number, weight: number) {
    this.#name = name;  // (4)
      :
  }
  :
}

　リスト1のフィールドである（1）～（3）は、全て「#name」のように#から始まっています。このようなフィールドは、プライベートとして処理されます。すなわち、（4）のようにクラス内からは、自由にアクセスできる一方で、クラス外からはアクセスできません。例えば、リスト2のようにBMIDataクラスをnewしたオブジェクトであるtaroの#nameにアクセスしようとすると、図1のようにエラーとなります。

リスト2：BMIDataのプライベートフィールドへのアクセスの例

const taro = new BMIData("田中太郎", 170.4, 68.4);
const taroName = taro.#name;

図1: #nameへのアクセスでのエラー

JavaScriptのプライベートメソッドとアクセサ

　ES2022でJavaScriptに導入された#によるプライベート構文は、何もフィールドだけではありません。メソッドやアクセサにも#をつけることで、プライベートにできます。このメソッドやアクセサに関するES2022のプライベート構文のTypeScriptへの導入は、フィールドに遅れてバージョン4.3で実現しました。

　これは、例えば、プライベートメソッドならばリスト3、アクセサならばリスト4のようなコードです。

リスト3：#によるプライベートメソッドの例

class BMIData {
  :
  #calcBMI(): number {
    :
  }
}

リスト4：#によるプライベートアクセサの例

class BMIData {
  :
  get #bmi(): number {
    :
  }
}

　もちろん、これらのメソッドやアクセサに対して、リスト2と同じようにtaro.#calcBMI()やtaro.#bmiのようにアクセスしようとすると、図1と同じようにエラーとなります。

private vs #

　このように、#によるプライベート構文が導入されたとはいえ、TypeScriptのprivateによるプライベート構文も依然健在です。どちらの構文を利用した方がいいのかという問題に対して、TypeScriptの公式ドキュメントでは「ハードプライバシー（hard privacy）」と「ソフトプライバシー（soft privacy）」という考え方を提示しています。

　ご存知のように、TypeScriptのコードは、原則、そのままではブラウザなどの実行環境（ランタイム）では動作しません。一度、JavaScriptコードへとコンパイルすることで実行する仕組みとなっています。TypeScriptオリジナルの仕組みというのは、コンパイル時にのみ有効であり、いったんJavaScriptコードへと変換されると、意味をなさなくなります。

　privateやprotectedは、まさにその典型であり、コンパイル時にのみクラス外部からのアクセスをチェックして、エラー表示されるだけです。例えば、リスト1のBMIDataクラスに関して、privateを使ってコーディングしているとして、そのクラスがコンパイルされたJavaScriptコードのBMIDataクラスのnameプロパティに対しては、自由にアクセスできてしまいます。これを、ソフトプライバシーと呼んでいます。

　一方、#によるプライベート構文は、JavaScript本来のものですので、コンパイルされても有効です。そのためリスト1のBMIDataクラスがコンパイルされたJavaScriptコードのBMIDataクラスでも、#nameプロパティへのアクセスはエラーとなります。これを、ハードプライバシーと呼んでいます。

　結論から言うと、ハードプライバシーの方が安全です。ただし、ES2022は比較的新しい構文のため、サポートしていないランタイムも存在します。その辺りを考慮にいれ、可能な限りハードプライバシー、すなわち、#によるプライベート構文を利用していけばよいでしょう。