TypeScript Academy · レッスン

実践で使うT extends U ? X : Y

実用的なConditional Typesを記述し、unionへの分配と、必要に応じて分配を無効にする方法を学びます

レッスン 1/38 ステップ

「実践で使うT extends U ? X : Y」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。

導入

目標:条件型を使って型システム内のロジックを表現し、条件型がユニオンに対していつ分配されるかを理解します。

  • パターン:T extends U ? X : Y
  • 分配:ユニオンの各メンバーに対して分岐を適用する

基本パターン

条件型は、Tがstringに代入可能かどうかに基づいて分岐を選択します。

type IsString<T> = T extends string ? true : false

type A = IsString<string>
//   ^ true

type B = IsString<number>
//   ^ false

分配

裸のTを使うと、チェックはユニオンの各メンバーに対して実行されます。string | numberはstring[] | number[]になります。

type ToArray<T> = T extends any ? T[] : never

type C = ToArray<string | number>
// distributes:
// C is string[] | number[]

分配を無効にする

Tをタプル([T])でラップすると、分配を防ぎ、ユニオン全体を1つの型として扱えます。

type ToArrayNoDist<T> = [T] extends [any] ? T[] : never

type D = ToArrayNoDist<string | number>
// no distribution:
// D is (string | number)[]

実用的なユーティリティ

このパターンの例として、配列の場合、ElementTypeはinferを使って要素の型を取り出します。それ以外の場合は型をそのまま保持します。

type NonEmptyArray<T> = T[] extends [] ? never : T[]
// Usually better:
// type ElementType<T> = T extends ReadonlyArray<infer U> ? U : T

type E1 = ElementType<string[]>
//   ^ string

type E2 = ElementType<readonly number[]>
//   ^ number

type E3 = ElementType<string>
//   ^ string

ヒント

ヒント:条件はシンプルに保ち、デプロイ先に注意します。ヘルパー型を再利用し、複雑な組み合わせにはテストファイルを用意します。

// Tips
// - Keep conditions simple; deep nesting harms readability
// - Document distribution behavior for teammates
// - Prefer helper aliases (ElementType, Awaited) for reuse
// - Watch for De Morgan like logic when composing unions

分配のチェック

クイックチェック:条件型はいつ分配されるでしょうか。

まとめ

まとめ:条件型は型の中でロジックを表現します。分配はユニオンの各メンバーに適用され、タプルでラップすると分配を無効にできます。

無料で開始

AI チューターと学ぶ TypeScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
101
レッスン
352

よくある質問

「実践で使うT extends U ? X : Y」レッスンは無料ですか?

はい。「実践で使うT extends U ? X : Y」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「実践で使うT extends U ? X : Y」で何を学びますか?

実用的なConditional Typesを記述し、unionへの分配と、必要に応じて分配を無効にする方法を学びます ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。

「実践で使うT extends U ? X : Y」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか?

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 実践で使うT extends U ? X : Y
  2. ReturnTypeのようなユーティリティのinfer
  3. 組み込み型:ReturnType、Parameters、InstanceTypeなど
← TypeScript Academyに戻る