※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。

【TypeScript】条件付き型（Conditional Types）を効果的に使う

infer Conditional Type TypeScript 型推論型定義

投稿日：2023年3月22日

この記事では私がTypeScriptでアプリケーションの型定義をする際のConditional Typesの使い方について簡単にご紹介します。

はじめに

この記事について

この記事では、自分が普段TypeScriptでAPIなど外部リソースを参照する際の型の定義する際によく使用しているConditional Types（条件付き型）について簡単にまとめます。

Conditional Types（条件付き型）の基本的な機能などについての説明は記事に含まれないため、わからない方は先に公式のドキュメントを読むことをオススメします。

環境について

この記事のコードは以下の環境で確認されています。

typescript 4.7.3

実践

Conditional Typesを使わなかった場合

例えば以下のような型定義があるとします。

sample.ts

/**
 * APIから取得できるデータの型
 */
type ResponseData = {
    name: string
    age: number
}

/**
 * API管理クラスの状態
 */
type Status = {
    isLoading: boolean;
    data: ResponseData | undefined
}

例えばアプリケーションのロジックとして、isLoadingがfalseのとき必ずデータが入っていることが保証されている場合、少しだけロジックのコードに無駄が多くなってしまいます。

ロジックのコードの例

const sample = (status: Status) => {
    if (!status.isLoading) {
        // dataがundefinedではないのに
        // 値がundefinedではない確認が必要
        if (status.data) {
            console.log(status.data.age)
        }
    }
}

このような場合にはConditional Types（条件付き型）を使うことで扱いやすい型定義を生成することができます。

Conditional Typesを使った場合

Conditional Typesを使った型定義

/**
 * APIから取得できるデータの型
 */
type ResponseData = {
    name: string
    age: number
}

/**
 * API管理クラスの状態
 */
type Status<T> = T extends false ? { isLoading: T, data: ResponseData } : { isLoading: T, data: ResponseData | undefined }

このように定義することで、isLoadingの値チェックをした時点でdataの型を確定させることができます。

サンプルの実行時

const sample = (status: Status<boolean>) => {
    if (status.isLoading) {
        // status.dataの型は
        // ResponseData | undefined
        // になる
    } else {
        // status.dataの型は
        // ResponseData
        // になる
        console.log(status.data.age)
    }
}

記事へのコメント

【TypeScript】条件付き型（Conditional Types）を効果的に使う

はじめに

この記事について

環境について

実践

Conditional Typesを使わなかった場合

Conditional Typesを使った場合

検索

カテゴリ

Web開発

機械学習

プログラミング

その他

サーバー開発

Linux

目次