TypeScriptのfor...inループとObject.keys()でカスタムリテラル型を反復処理する方法

2024-06-20

TypeScript でカスタムリテラル型を反復処理する方法

Object.keys() と for...in ループを使用する

この方法は、カスタムリテラル型のすべてのプロパティキーを反復処理するのに役立ちます。

type User = {
  name: string;
  age: number;
  email: string;
};

const user: User = {
  name: "太郎",
  age: 30,
  email: "[email protected]",
};

for (const key in user) {
  console.log(key, user[key]); // name 太郎, age 30, email [email protected]
}

利点:

シンプルで分かりやすい

プロパティの値にのみアクセスできません
プロパティの順序が保証されない

type User = {
  name: string;
  age: number;
  email: string;
};

const user: User = {
  name: "太郎",
  age: 30,
  email: "[email protected]",
};

for (const value of Object.values(user)) {
  console.log(value); // 太郎, 30, [email protected]
}

ジェネリック型とイテレータを使用する

この方法は、カスタムリテラル型のプロパティキーと値の両方にアクセスできる、より柔軟な方法を提供します。

type User = {
  name: string;
  age: number;
  email: string;
};

function iterateUser<T extends User>(user: T): IterableIterator<[keyof T, T[keyof T]]> {
  return function* () {
    for (const key in user) {
      yield [key, user[key]];
    }
  };
}

const user: User = {
  name: "太郎",
  age: 30,
  email: "[email protected]",
};

for (const [key, value] of iterateUser(user)) {
  console.log(key, value); // name 太郎, age 30, email [email protected]
}

プロパティの順序を制御できる

コードが少し複雑になる

最適な方法は、特定の状況によって異なります。

単にプロパティキーを反復処理する必要がある場合は、Object.keys() と for...in ループを使用するのが最も簡単です。
プロパティキーと値の両方にアクセスする必要があるか、またはプロパティの順序を制御する必要がある場合は、ジェネリック型とイテレータを使用する必要があります。

いずれの方法を選択する場合も、TypeScript の型システムを活用して、コードを安全で堅牢なものにすることが重要です。

Object.keys() と for...in ループを使用する

type User = {
  name: string;
  age: number;
  email: string;
};

const user: User = {
  name: "太郎",
  age: 30,
  email: "[email protected]",
};

for (const key in user) {
  console.log(key, user[key]); // name 太郎, age 30, email [email protected]
}

Object.values() と for...of ループを使用する

type User = {
  name: string;
  age: number;
  email: string;
};

const user: User = {
  name: "太郎",
  age: 30,
  email: "[email protected]",
};

for (const value of Object.values(user)) {
  console.log(value); // 太郎, 30, [email protected]
}

ジェネリック型とイテレータを使用する

type User = {
  name: string;
  age: number;
  email: string;
};

function iterateUser<T extends User>(user: T): IterableIterator<[keyof T, T[keyof T]]> {
  return function* () {
    for (const key in user) {
      yield [key, user[key]];
    }
  };
}

const user: User = {
  name: "太郎",
  age: 30,
  email: "[email protected]",
};

for (const [key, value] of iterateUser(user)) {
  console.log(key, value); // name 太郎, age 30, email [email protected]
}

これらの例は、カスタムリテラル型を反復処理する基本的な方法を示しています。実際の状況では、より複雑なカスタムリテラル型や、より高度な反復処理ロジックが必要になる場合があります。

TypeScript でカスタムリテラル型を反復処理するその他の方法

in 演算子を使用して、オブジェクトのプロパティが存在するかどうかを確認できます。この演算子を使用して、カスタムリテラル型のすべてのプロパティキーを反復処理することもできます。

type User = {
  name: string;
  age: number;
  email: string;
};

const user: User = {
  name: "太郎",
  age: 30,
  email: "[email protected]",
};

for (const key in user) {
  if (user.hasOwnProperty(key)) {
    console.log(key, user[key]); // name 太郎, age 30, email [email protected]
  }
}

hasOwnProperty() メソッドを使用するよりも簡潔なコードになる場合がある

シンボルを使用して、カスタムリテラル型のプロパティを独自に識別できます。シンボルを使用して、プロパティキーを反復処理し、プロパティ値にアクセスすることもできます。

type User = {
  [key: symbol]: any;
};

const nameSymbol = Symbol("name");
const ageSymbol = Symbol("age");
const emailSymbol = Symbol("email");

const user: User = {
  [nameSymbol]: "太郎",
  [ageSymbol]: 30,
  [emailSymbol]: "[email protected]",
};

for (const key in user) {
  if (typeof key === "symbol") {
    console.log(key, user[key]); // Symbol(name) 太郎, Symbol(age) 30, Symbol(email) [email protected]
  }
}

プロパティキーを独自に識別できる

シンボルは、比較やキーとして使用する場合に注意が必要

デコレータを使用して、カスタムロジックをクラスやプロパティに挿入できます。デコレータを使用して、カスタムリテラル型のプロパティを反復処理するロジックを追加することもできます。

type User = {
  name: string;
  age: number;
  email: string;
};

function enumerable(target: any, propertyKey: string | symbol) {
  const originalDescriptor = Object.getOwnPropertyDescriptor(target, propertyKey);
  if (originalDescriptor) {
    Object.defineProperty(target, propertyKey, {
      ...originalDescriptor,
      enumerable: true,
    });
  }
}

class User {
  @enumerable
  name: string;

  @enumerable
  age: number;

  @enumerable
  email: string;
}

const user = new User();
user.name = "太郎";
user.age = 30;
user.email = "[email protected]";

for (const key in user) {
  console.log(key, user[key]); // name 太郎, age 30, email [email protected]
}