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


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

infer Conditional Type TypeScript 型推論 型定義

投稿日:2023年3月22日

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

はじめに

この記事について

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

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

環境について

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


実践

Conditional Typesを使わなかった場合

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

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

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

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

ロジックのコードの例
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)
    }
}
このエントリーをはてなブックマークに追加


関連記事

記事へのコメント