コンテンツにスキップ

TypeScript のテクニック

TypeScript で文字列の配列から型を生成する

1
2
export const ROLES = ["administrator", "standard"] as const;
export type Role = (typeof ROLES)[number]; // "administrator" | "standard"

?とか!とか

TypeScript でよく見る「?」「!」と仲良くしたい

辞書型の書き方

1
loadAudio(res: { [key: string]: string }): ICharacterUseCase;

メンバ変数とプロパティの違い

クラス内部で保持する変数がメンバ変数。クラスの外部からアクセスするインターフェースがプロパティ。

プロパティを用意せずにメンバ変数を直接公開することはベストプラクティスではない。

1
2
3
4
5
6
7
8
class Something {
  private _member = 0; // _memberはメンバ変数
  get member() {
    // memberはgetアクセサを使ったプロパティ
    return this._member;
  }
  readonly readonlyProperty = 10; // readonlyPropertyはプロパティ
}

プロパティを持っているかを確認する

1
2
Object.hasOwn({ a: 0 }, "a"); // true
Object.hasOwn({ a: 0 }, "b"); // false

const と readonly の違い

オブジェクトについて、オブジェクトそのものの再代入を防ぎたいときはconstを使う。

オブジェクトのプロパティを定義する際に今後の再代入を防ぎたいときはreadonlyを使う。

readonly と get()の違い

プロパティの値を変更できないようにするのがreadonly修飾子。(readonlyで定義したものはプロパティといえる)

プロパティにカスタムロジックを提供するのがget()アクセサ。

外部から見て読み取り専用かつ、値が不変のプロパティを宣言するときはreadonlyを使うことが望ましい。(コードを見た時点で不変であることが明確であるため)

外部から見て読み取り専用であり、値が動的に変わるプロパティを宣言する場合はget()アクセサを使用する。