フロントエンド入門者へおすすめ動画&書籍おすすめ!

TypeScript

【初心者向け】TypeScript の高度な型 ④ Conditional Typesとは?

0
0

 

TypeScriptには高度な型として、Conditional Typesが使えます。

 

これは、型の互換性を条件分岐にかけて、型推論を導出する型です。

 

型が互換性を満たす場合、任意の型を返却できます。

 

ある型の互換性が満たされていると判断された場合、比較された型は、派生型であることが確約されます。

 

例えば、nameプロパティを保持しているかどうかという分岐の場合は、

 

nameプロパティの型参照が可能になります。

 

また、inferシグネチャを用いた部分型のキャプチャを、Conditional Types の構文内で利用できます。

 

これは、Type inference in Conditional types と呼ばれる機能で、Conditional Types を巧みに利用することで、

 

従来では不可能だった型推論が可能にアンリます。

 

型の条件分岐

 

Conditional Types は T extends X ? Y : Z という構文で表される。

 

T型がX型と互換性がある場合はY型が、そうでない場合はZ型が適用される。

 

つまり、JavaScriptの三項演算子と同じ構文です。

 

この条件分岐がどのような振る舞いをするのか、まず確認してみましょう。

 

type IsString<T> = T extends sring ? true : false
type X = IsString<'test'> // type X = true
type Y = IsString<0> // type Y = false

 

この条件分岐を用いることで、型の制約を設けたり、部分型を抽出できるようになります。

 

Mapped Typesでの利用

 

次のように、MappedTypes の中で、Conditional Types を利用できます。

 

例えば、下記の例では、Properics 型に対して、IsType型を用いて変換しています。

 

そうすることで、U型に一致するプロパティは、true型に変換されます。

 

 

interface Properties {
 name: string
 age: number
 flag: boolean
}

type Istype<T, U> = {
 [K in keyof T]: T[K] extends U ? true : false
}

type IsString = Istype<Properties, string>
type IsNumber = IsType<Properties, number>
type IsBoolean = IsType<Properties, boolean>

 

この型を利用して得られる型は、下記のようになります。

 

第二Genericsと互換性のあるプロパティがtrueに変換されていることが確認できる。

 

// 型推論結果

type IsString = {
 name: true 
 age: false
 flag: false
}

type IsNumber = {
 name: false
 age: true
 flag: false
}

type IsBoolean = {
 name: false
 age: false
 flag: true
}

 

一致するプロパティ名称から型を生成

 

取得した名称を元にして、新しい型を生成してみましょう。

 

組み込みUtility typesであるPick型を利用すると、元のObject型から該当のプロパティのみを抽出したObject型を生成できます。

 

リスト6-2-5のFilter型とPick型を併用します。

 

Pick型は、TypeScriptが提供している組み込みUtility Typesです。

 

type StringKeys<T> = Filter<T, string>

type Strings = Pick<Properties, StringKeys<Properties>>

 

型推論結果

 

type Strings = {
 name: string
}

 

Pocket
LinkedIn にシェア

フロントエンド入門者へおすすめ動画&書籍おすすめ!

  • この記事を書いた人
  • 最新記事

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-TypeScript

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.