0つ以上の型引数を入力として、条件分岐を行い導出する型。
```ts
// 『型Xは、AがBに代入可能であるときはC、そうでなければDである』と同意
type X = A extends B ? C : D;
```
## `number`または`string`を入力すると逆の型をとるケース
```ts
type Other<T extends number | string> = T extends number ? string : number;
declare const typeA: Other<number>;
// ^?
declare const typeB: Other<string>;
// ^?
declare const typeC: Other<boolean>;
// Type 'boolean' does not satisfy the constraint 'string | number'.(2344)
```
<button class="playground"><a href="https://www.typescriptlang.org/play?#code/C4TwDgpgBA8sAWEBOAeAKlCAPYEB2AJgM5R4CuAtgEbJQA+URwSAlngOYB8UAvFBtlyES5arQD8jZm3ZQAXKUo0kAbgBQaghADGAGwCGSaNoD2eJlFCQAggriJUo5Z3UB6V1E9fvngHrjNHQMjKFNzYEtwCAAhOwRkFCZWDhc1dx8MqH9AvUNjMwsrCABhOIcUKhMTXQh9PFT0tCioAHJK6tq8FqgCEwgREwiifWAWIgAzEEtEUILmfTYIlqSZekUxJBaAOgAKACYAZgAWI4BKNSA">Playground</a></button>
## typeで別名を定義せずに直接使うケース
```ts
interface IdLabel {
id: number;
}
interface NameLabel {
name: string;
}
// Conditional Typesを使わないと以下のようなオーバーロード ＋ 実装がいる
// function createLabel(id: number): IdLabel;
// function createLabel(name: string): NameLabel;
// function createLabel(nameOrId: string | number): IdLabel | NameLabel;
function createLabel<T extends string | number>(
nameOrId: T
): T extends string ? NameLabel : IdLabel {
throw "unimplemented";
}
const a = createLabel(1);
// ^?
const b = createLabel("hoge");
// ^?
```
<button class="playground"><a href="https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgJIBMAycBGEA2yA3gFDLLDoBcyIArgLZ5QDcJAviaJLIigHJwGEbHkKlyIIRBoBnMFFABzNpxIB6dcgDCAexDpgYYPriEAKgE8ADhFmAkhkD+8oHiGQFYMgEQZAFgyBTuUDQcoDsGQAiGQDEGV0AqhkAfhkAFhgjAW4YIwEmGZEBof+RAfO1AUYjAGQZ3QGiGDS0YOhAEY31kBCgIOEhRAgAKShp6JmgAShoMOvw2TWQikrKQCqqakVwGqWE5BWUO5EFhbt7C4tKTYcrq2on8eqmIAHkoDBnFECVkAB9aRmZ5rt3rhellkhIB9fKtse6AHnMyAgAA9IAZZMh5OdLjcWswAHz1Mi0aTHU7IcwkeaAkFg9AQqHKZAAfheSyenSwTwkyDAAAsoLoAO7IABExWADGs+AgwnAEHQrNU7wQ+nkyDgyAAvCNtuMxPUAIxtFbkcgAPWJJFFIHFOGlst+u3qrLpuiUEFZKoKauQmpIQA">Playground</a></button>
## MOC
- 📒**関連**
- [[inferキーワード (TypeScript)|inferキーワード]]
- [[条件付き型は分配的 (TypeScript)|条件付き型は分配的]]
- 📜**アクティビティ**
- 📝**トラブルシューティング**