【TypeScript入門】LiteralUnionTypesを作る2つの方法 | keyof型演算子とtypeof型演算子の活用

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

今回は、TypeScript の Literal-Union-Types を作る2つの方法について解説していきます。

今回の記事では、前提として次の2つの記事の内容を扱います。

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

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

【TypeScript入門】配列から型を生成する方法 | typeof & as const

【配列から型を生成する方法 | typeof & as const 】

1 Pattern-1: 既存の型から keyof で型を抽出する
2 Pattern-2: 配列から typeof で型を抽出する-Pattern
3 LiteralUnionTypesを作る2-PatternのSample-Code全文
4 TypeScript書籍
5 最近の投稿

Pattern-1: 既存の型から keyof で型を抽出する

Literal-Union-Types を作成する Pattern の1つ目は、既存のObject-Typeから「keyof-型演算子」で「型」を抽出する-Patternです。

keyof-型演算子は「型」から「key」を「Literal-Union-Types」で、抽出することができる演算子です。

// [ Pattern-1 ]
// 既存の型から「keyof」で型を抽出する-Pattern
interface RobotamaProjectInfoObj {
    id: string;
    project_name: string;
    group_name: string;
    project_path: string;
    created_user_id: string;
    updated_user_id: string;
    createdAt: string;
    updatedAt: string;
    robotama_flag: boolean;
    year: number;
    month: number;
}

// TypeScriptの「keyof-型演算子」は「型」から key を抽出することができる！
type ProjectKeyTypes = keyof RobotamaProjectInfoObj;
// [ 作成された型 ]
// type ProjectKeyTypes = "id" | "project_name" | "group_name" | "project_path" | 
// "created_user_id" | "updated_user_id" | "createdAt" | "updatedAt" | "robotama_flag" |
// "year" | "month"

const projectKey: ProjectKeyTypes = 'id';

Pattern-2: 配列から typeof で型を抽出する-Pattern

Literal-Union-Types を作成する Pattern の2つ目は、用意した配列から typeof-型演算子で型を抽出する-Patternです。

typeof-型演算子は「変数」からDataの「構造」(型)を抽出することができる演算子です。

// [ Pattern-2 ]
// 配列から「typeof」で型を抽出する-Pattern
const extractKeysList = ['id', 'project_name', 'group_name', 'robotama_flag'] as const;

// TypeScriptの「typeof-型演算子」は「変数」から 構造を抽出することができる！
type ExtractKeyTypes = typeof extractKeysList[number];
// [ 作成された型 ]
// type ExtractKeyTypes = "id" | "project_name" | "group_name" | "robotama_flag"

const extractProjectKey: ExtractKeyTypes = 'robotama_flag';

LiteralUnionTypesを作る2-PatternのSample-Code全文

// < Literal-Union-Types を作成する 2-Pattern >

// [ Pattern-1 ]
// 既存の型から keyof で型を抽出する-Pattern
interface RobotamaProjectInfoObj {
    id: string;
    project_name: string;
    group_name: string;
    project_path: string;
    created_user_id: string;
    updated_user_id: string;
    createdAt: string;
    updatedAt: string;
    robotama_flag: boolean;
    year: number;
    month: number;
}

// TypeScript の keyof-演算子は、「型」から key を抽出することができる！
type ProjectKeyTypes = keyof RobotamaProjectInfoObj;
// [ 作成された型 ]
// type ProjectKeyTypes = "id" | "project_name" | "group_name" | "project_path" | 
// "created_user_id" | "updated_user_id" | "createdAt" | "updatedAt" | "robotama_flag" |
// "year" | "month"

const projectKey: ProjectKeyTypes = 'id';


// [ Pattern-2 ]
// 配列から typeof で型を抽出する-Pattern
const extractKeysList = ['id', 'project_name', 'group_name', 'robotama_flag'] as const;

// TypeScript の  => typeof-演算子は、「変数」から 構造を抽出することができる！
type ExtractKeyTypes = typeof extractKeysList[number];
// [ 作成された型 ]
// type ExtractKeyTypes = "id" | "project_name" | "group_name" | "robotama_flag"

const extractProjectKey: ExtractKeyTypes = 'robotama_flag';