【TypeScript】keyofとtypeofの使い方備忘録

はじめに

先輩が書いたコードを眺めていると、keyofとかtypeofを使ったコードがよく出てきます。
その度に「どういう使い方だっけ」って調べるのも面倒なのでまとめることにしました。

keyofって何だ？

サバイバルTypeScriptによると、オブジェクト型からプロパティ名を型として返す演算子と記載されています。

いや、よくわからん

実際のコードを見てみましょう。

例

type Person = {
  name: string,
};
type PersonKey = keyof Person;
// PersonKey = "name" となる
// PersonKey = "age" ← Error

type Book = {
  title: string,
  price: number,
  rating: number,
};
type BookKey = keyof Book;
// BookKey = "title" | "price" | "rating" のユニオン型となる

オブジェクトのプロパティ名を型として返す仕様になっています。
プロパティ名以外の値を代入しようとするとエラーとなります。

typeofとはなんぞや

サバイバルTypeScriptによると、値の型を調べることができると記載されています。

どう使うんだろう

例

typeof true; // boolean
typeof "aaa" // string

type Person = {
    name: string,
    age: number,
}

const person: Person = {
    name: "yamada",
    age: 20,
    birthday: "2000-01-01", // ← Error
}

型を調べて条件分岐等に使うこともあれば、オブジェクトに格納できるプロパティを制限する時にも使えそうですね🤔

keyofとtypeofの合わせ技

keyofは型にしか使えず、変数には使えない。
typeofだと、オブジェクトのキーと値のセットで取得される。

変数かつオブジェクトのプロパティ名をユニオン型として定義したい場合に使います。

例

const someObj = {
  hoge: 'HOGE',
  fuga: 'FUGA',
}

let obj: keyof typeof someObj; // obj = 'hoge' | 'fuga'
obj = 'hoge';


const Color = {
  red: "RED",
  green: "GREEN",
  blue: "BLUE",
} as const;

type Color = typeof Color[keyof typeof Color];
// Color = 'RED' | 'GREEN' | 'BLUE'

ちなみにas constは型アサーションと呼ばれるものです。

プロパティがreadonlyになるので、再代入ができなくなります。

まとめ

型安全難しい。。