【Typescript】 typeof と keyof を理解する

typeofとkeyof現場のソースコードでよく見るけどわからなくなることがあるのでまとめました。

typeof

typeof 変数と書くと変数の型がつくれます。
todoというオブジェクトを例に説明します。

const todo = {
id:1,
task:'勉強',
isDone:true
}

Todo1とTodo2は同じ型を示します。

type Todo1 = {
id:number;
task:string;
isDone:boolean;
}

// typeof todo はtodoオブジェクトの型だよ。という意味
type Todo2 = typeof todo

keyof

keyof Tは「型Tのプロパティ名のユニオン型」を表します。

type Todo1 = {
id:number;
task:string;
isDone:boolean;
}

// 型Key1は型Todo1のkeyをとってきた型だよ。という意味
type Key1 = keyof Todo1
//type Key1 =  "id" | "task" | "isDone"

※注意点はtypeof 変数、keyof 型のように使うこと。
似ているようで全然違います。

keyofとtypeofを組み合わせる

typeofとkeyofを使用して以下のようにも表すことができます。

オブジェクトのプロパティ名の型

const todo = {
id:1,
task:'勉強',
isDone:true
}

// 型Keyはtodoの型の、keyをとってきた型だよ。という意味
type Key = keyof typeof todo
//type Key =  "id" | "task" | "isDone"

正直プロパティ名の型が欲しいときってあまりない気がしました。

オブジェクトのプロパティ名に対応する値の型

type Value = typeof todo[keyof typeof todo]
// type Value = string | number | boolean;

こちらは「このオブジェクトのそれぞれのプロパティに対する値の型がほしい！」
というときに使えます。これ覚えておくと使えるときがわりとあります。

おわりに

エンジニア歴1年未満の初心者です。
Typescript,React学習中です。
今回は初投稿でした！これから自分のペースで記事投稿続けていきたいと思いますのでよろしくお願いします。