【TypeScript入門】keyofとtypeofの使い方 | オブジェクトから型を生成する方法

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、TypeScriptにおけるkeyofとtypeofの使い方について解説して行きます。

1 keyof-型演算子とは
2 typeof-型演算子とは
3 typeof-型演算子とkeyof-型演算子
4 まとめ
5 TypeScript書籍
6 参考・引用
7 最近の投稿

keyof-型演算子とは

keyofはオブジェクト型からプロパティ名を型として返す型演算子です。
たとえば、nameプロパティを持つ型に対して、keyofを使うと文字列リテラル型の”name”が得られます。
引用元：『サバイバルTypeScript』keyof型演算子

keyof-型演算子の特徴は、この説明にある通り、「型」からkey名を文字列リテラル型で取得できることです。

注意点は、「型」に対して使用する演算子であると言うことです。

「変数」(値)から「型」を抽出したい場合は、のちに説明するtypeof演算子を使いましょう！

interface FruitBasket {
    apple: number;
    grape: number;
    orange: number;
}

// 1.「型」からkey名を抽出する: keyof-型演算子
type FruitItem = keyof FruitBasket;

const anyFruit: FruitItem = 'apple';
// 2. anyFruit = 'apple' | 'grape' | 'orange'

このようにObject構造の型からkey名のみを抽出して、新たな「型」を作成することができます。

typeof-型演算子とは

JavaScriptにもtypeof-演算子はありますが、それは型を判定・識別するための演算子です。

それに対して、TypeScriptのtypeof-演算子は「変数」から「型」を抽出する機能があります。

つまり、実際の値(変数)から構造(型)を抽出することができるのです。

また、先ほど説明したkeyof-演算子と組み合わせて使うことで、typeof-型演算子で抽出した型からKey-Literal-Union-Typesを取得することができます。

const FruitBasket = {
    apple: 5,
    grape: 7,
    orange: 8
}

// 1. 「変数」から型を抽出する: typeof-演算子(Ver.TS)
type FruitBasketType = typeof FruitBasket;

const NewFruitBasket: FruitBasketType = {
    apple: 1,
    grape: 2,
    orange: 1
}

// keyof + typeof で「変数」からkey名を抽出する: String-Literal-Union-Types
type FruitBasketKey = keyof typeof FruitBasket;
// [型作成・結果] type FruitBasketKey = "apple" | "orange" | "grape"

typeof-型演算子とkeyof-型演算子

keyof-型演算子とtypeof-型演算子を使用して型を作成するSample-Codeです。

// 1. Object
const momoChan = {
    name: "もも",
    type: "Cat",
    age: 5,
    like: "ロボ玉",
    hello: (): void => { console.log(`${momoChan.name}は、Myaoと鳴いた!`); }, 
    eat: ([esa1, esa2]: string[]): void => { console.log(`${esa1}&${esa2}が今日の${momoChan.name}のご飯`); },
};

// 2. typeofで値から型を抽出する。
type momoType = typeof momoChan;
// 【型作成】
// type momoType = {
//     name: string;
//     type: string;
//     age: number;
//     like: string;
//     hello: () => void;
//     eat: ([esa1, esa2]: string[]) => void;
// }

// 3. keyofで型からkeyの型を抽出する。
type momoKeyType = keyof momoType;
// 【型作成】 type momoKeyType = "name" | "type" | "age" | "like" | "hello" | "eat"

typeof-型演算子とkeyof-型演算子を活用して、型の作成を楽にして行きましょう！