コードの品質を向上させる！TypeScriptでオブジェクトのキーを制限するベストプラクティス

2024-04-02

TypeScript で列挙型を制限付きキー型として使用する

例

次の例では、Color という列挙型を定義しています。

enum Color {
  Red,
  Green,
  Blue,
}

この列挙型を使用して、Point というオブジェクト型を定義することができます。Point オブジェクトには、x と y という 2 つのプロパティがあり、Color 列挙型の値のみをキーとして使用できます。

interface Point {
  [key: Color]: number;
}

このコードは、次のようになります。

const point: Point = {
  Red: 10,
  Green: 20,
  Blue: 30,
};

上記のコードでは、point オブジェクトのキーとして Red、Green、Blue という値のみを使用できます。Yellow などの無効な値を使用しようとすると、コンパイルエラーが発生します。

利点

列挙型を制限付きキー型として使用する利点は次のとおりです。

コードの安全性を向上させることができます。
開発者が意図しない値をキーとして使用することを防ぐことができます。

TypeScript で列挙型を使用して、オブジェクトのキーを制限することができます。これは、コードの安全性を向上させ、開発者が意図しない値をキーとして使用することを防ぐのに役立ちます。

例 1: 色をキーとしたオブジェクト

enum Color {
  Red,
  Green,
  Blue,
}

interface Point {
  [key: Color]: number;
}

const point: Point = {
  Red: 10,
  Green: 20,
  Blue: 30,
};

// 有効なキー
console.log(point.Red); // 10
console.log(point.Green); // 20
console.log(point.Blue); // 30

// 無効なキー
// コンパイルエラーが発生します
// console.log(point.Yellow);

例 2: 数字をキーとしたオブジェクト

enum Number {
  One,
  Two,
  Three,
}

interface Data {
  [key: Number]: string;
}

const data: Data = {
  One: "First",
  Two: "Second",
  Three: "Third",
};

// 有効なキー
console.log(data.One); // "First"
console.log(data.Two); // "Second"
console.log(data.Three); // "Third"

// 無効なキー
// コンパイルエラーが発生します
// console.log(data.Four);

例 3: 文字列をキーとしたオブジェクト

enum MyEnum {
  "First",
  "Second",
  "Third",
}

interface MyData {
  [key: MyEnum]: boolean;
}

const myData: MyData = {
  First: true,
  Second: false,
  Third: true,
};

// 有効なキー
console.log(myData.First); // true
console.log(myData.Second); // false
console.log(myData.Third); // true

// 無効なキー
// コンパイルエラーが発生します
// console.log(myData.Fourth);

注: サンプルコードは、あくまでも参考です。必要に応じて、コードを修正して使用することができます。

TypeScript でオブジェクトのキーを制限する他の方法

インターフェースを使用して、オブジェクトのキーと値の型を定義することができます。

interface Point {
  x: number;
  y: number;
}

const point: Point = {
  x: 10,
  y: 20,
};

// 無効なプロパティ
// コンパイルエラーが発生します
// point.z = 30;

readonly 修飾子を使用して、オブジェクトのプロパティを書き込み不可にすることができます。

const point = {
  x: 10,
  y: 20,
} as const;

// 無効なプロパティの変更
// コンパイルエラーが発生します
// point.x = 30;

Record 型を使用して、キーと値の型のペアからオブジェクトを作成することができます。

const point: Record<Color, number> = {
  Red: 10,
  Green: 20,
  Blue: 30,
};

// 無効なキー
// コンパイルエラーが発生します
// point.Yellow = 40;

interface Point {
  x: number;
  y: number;
}

const point: Partial<Point> = {
  x: 10,
};

// 有効なプロパティの省略
console.log(point.y); // undefined

interface Point {
  x: number;
  y: number;
  z: number;
}

const point: Pick<Point, "x" | "y"> = {
  x: 10,
  y: 20,
};

// 無効なプロパティ
// コンパイルエラーが発生します
// console.log(point.z);