keyof と typeof を使って TypeScript インターフェースを解析する

TypeScript インターフェースプロパティの型を抽出する方法

keyof と typeof を使う

interface Person {
  name: string;
  age: number;
}

const getName = (person: Person): string => {
  return person.name; // 'name' は string 型であることが保証される
};

const getAge = (person: Person): number => {
  return person.age; // 'age' は number 型であることが保証される
};

この方法では、keyof を使ってインターフェースのプロパティ名のリストを取得し、typeof を使って各プロパティの型を取得します。

Pick を使う

interface Person {
  name: string;
  age: number;
  address: string;
}

type NameAndAge = Pick<Person, "name" | "age">;

const person: NameAndAge = {
  name: "John Doe",
  age: 30,
};

// 'address' プロパティは存在しない

この方法では、Pick を使ってインターフェースから特定のプロパティのみを含む新しい型を作成します。

Omit を使う

interface Person {
  name: string;
  age: number;
  address: string;
}

type WithoutAddress = Omit<Person, "address">;

const person: WithoutAddress = {
  name: "John Doe",
  age: 30,
};

// 'address' プロパティは存在しない

ユーティリティ型を使う

上記の方法以外にも、Partial や Required などのユーティリティ型を使って、インターフェースプロパティの型を抽出することができます。

詳細は以下のサイトを参照してください。

TypeScript インターフェースプロパティの型を抽出するには、いくつかの方法があります。それぞれの方法の特徴を理解して、状況に合わせて使い分けることが重要です。

// 1. `keyof` と `typeof` を使う

interface Person {
  name: string;
  age: number;
}

const getName = (person: Person): string => {
  return person.name; // 'name' は string 型であることが保証される
};

const getAge = (person: Person): number => {
  return person.age; // 'age' は number 型であることが保証される
};

// 2. `Pick` を使う

interface Person {
  name: string;
  age: number;
  address: string;
}

type NameAndAge = Pick<Person, "name" | "age">;

const person: NameAndAge = {
  name: "John Doe",
  age: 30,
};

// 'address' プロパティは存在しない

// 3. `Omit` を使う

interface Person {
  name: string;
  age: number;
  address: string;
}

type WithoutAddress = Omit<Person, "address">;

const person: WithoutAddress = {
  name: "John Doe",
  age: 30,
};

// 'address' プロパティは存在しない

// 4. ユーティリティ型を使う

interface Person {
  name: string;
  age: number;
  address: string;
}

// Partial を使って、すべてのプロパティをオプショナルにする
type PartialPerson = Partial<Person>;

// Required を使って、すべてのプロパティを必須にする
type RequiredPerson = Required<Person>;

// Readonly を使って、すべてのプロパティを読み取り専用にする
type ReadonlyPerson = Readonly<Person>;

// Record を使って、キーと値のペアのオブジェクトを作成する
type RecordOfPerson = Record<string, Person>;

このコードを実行することで、TypeScript インターフェースプロパティの型を抽出する方法を理解することができます。

TypeScript インターフェースプロパティの型を抽出する他の方法

keyof と IndexedAccessType を使って、インターフェースプロパティの名前と型をペアにしたオブジェクトを作成することができます。

interface Person {
  name: string;
  age: number;
}

const personProperties: {
  [key in keyof Person]: typeof Person[key];
} = {
  name: "John Doe",
  age: 30,
};

// 'personProperties' は以下の型になる
// {
//   name: string;
//   age: number;
// }

as キーワードを使って、インターフェースプロパティの型を別の型にキャストすることができます。

interface Person {
  name: string;
  age: number;
}

const name = (person: Person) => {
  return person.name as string; // 'name' は string 型であることが保証される
};

const age = (person: Person) => {
  return person.age as number; // 'age' は number 型であることが保証される
};

interface Person {
  name: string;
  age: number;
}

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const name = getProperty(person, "name"); // 'name' は string 型であることが保証される
const age = getProperty(person, "age"); // 'age' は number 型であることが保証される