Conditional Types(入門)とunionへの分配
Conditional Types(T extends U ? X : Y)と、強力な型レベルのロジックを可能にするunionへの分配を学びます
「Conditional Types(入門)とunionへの分配」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。
導入
目標:条件型(T extends U ? X : Y)を使って型レベルで分岐し、正確な結果を得るためのユニオンに対する分配を理解します。
基本的な条件型
条件型は、T extends Uが成り立つかどうかに応じて、2つの型のいずれかを返します。
type IsString<T> = T extends string ? true : false;
let a: IsString<string>; // true
let b: IsString<number>; // false
分配
裸の型パラメーターTを使うと、条件型はユニオンの各メンバーに対して実行され、その結果がユニオンになります。
type ToArray<T> = T extends any ? T[] : never;
type R1 = ToArray<string | number>; // string[] | number[]分配の停止
Tをタプル(例:[T])で囲むと分配を停止し、ユニオン全体を1つのまとまりとして扱えます。
type ToArrayNoDistrib<T> = [T] extends [any] ? T[] : never;
type R2 = ToArrayNoDistrib<string | number>; // (string | number)[]実践的なExclude
多くのユーティリティ型は分配に依存しています(例:Exclude、Extract)。独自のバリエーションも簡単に作成できます。
type MyExclude<T, U> = T extends U ? never : T;
type R3 = MyExclude<"a" | "b" | "c", "b">; // "a" | "c"ヒント
ヒント:
- 分配が発生するのは、
extendsの左側に裸の型パラメーターがある場合だけです。 - 分配を無効にするには、タプルで囲んでください。
- 直感どおりの結果になることを、小さな例で確認してください。
分配の確認
クイックチェック:条件型がユニオンに対して分配されるのはなぜですか?
まとめ
まとめ:型レベルの分岐には条件型を使います。結果がユニオンに対していつ分配されるかを理解し、タプルで囲んで分配を無効にする方法を学びました。
よくある質問
「Conditional Types(入門)とunionへの分配」レッスンは無料ですか?
はい。「Conditional Types(入門)とunionへの分配」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。
「Conditional Types(入門)とunionへの分配」で何を学びますか?
Conditional Types(T extends U ? X : Y)と、強力な型レベルのロジックを可能にするunionへの分配を学びます ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。
「Conditional Types(入門)とunionへの分配」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか?
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ジェネリックinterfaceとtype alias
- Conditional Types(入門)とunionへの分配
- データモデルの再利用可能なパターン