keyof・typeof・インデックスアクセス型

導入

すでにある interface や変数から、そのプロパティ名や特定プロパティの型だけを取り出したいことがあります。もう一度同じ内容を書き直さずに済むよう、TypeScript には型から型を取り出す仕組みがあります。

説明

keyof T は「T のプロパティ名をユニオン型にしたもの」です。

interface User {
  id: number;
  name: string;
}

type UserKey = keyof User;   // "id" | "name"
let key: UserKey = "name";
console.log(key);

typeof は変数から型を取り出します（JavaScript の実行時の typeof とは別物で、TypeScript の型の世界だけで使う書き方です）。

const config = { host: "localhost", port: 8080 };
type Config = typeof config;   // { host: string; port: number }

let c: Config = { host: "example.com", port: 443 };
console.log(c.host, c.port);

インデックスアクセス型は T["プロパティ名"] の形で、特定のプロパティの型だけを取り出します。

interface User {
  id: number;
  name: string;
}

type NameType = User["name"];   // string
let n: NameType = "太郎";
console.log(n);

やってみよう

UserKey に "age" のような、User に存在しないプロパティ名を入れようとするとどうなるか、コードを見ながら考えてみましょう。

演習

interface Item { title: string; price: number; } から keyof を使って ItemKey という型を作ってください。ItemKey 型の変数 k に "price" を入れて console.log(k) で表示してください。