TypeScript

TypeScript の高度な型 ⑧ 公式提唱のUtility Typesについて

TypeScript公式ドキュメントで提唱されてはいるものの、標準で組み込まれていない、便利な型定義を紹介します。

 

いずれも、TypeScript2.8から定義が可能になったUtility Typesです。

 

TypeName型

 

TypeName<T> はGenericsに互換性のある型が適用された場合、それに対応するString Literal Typesを返却する型

 

type TypeName<T> =
 T extends string ? "string" :
 T extends number ? "number" :
 T extends boolean ? "boolean":
 T extends undefined ? "undefined":
 T extends Function ? "function" :
 
"object"

type T0 = TypeName<string> // "string"
type T1 = TypeName<"a">  //"string"
type T2 = TypeName<true> // "boolean"
type T3 = TypeName<() => void> //"function"
type T4 = TypeName<string[]>  //"object"

 

FunctionalProperties型

 

Mapped Typesを併用して、Objectから関数型のみのプロパティ名を抽出し、その名称を元に関数型のみの新しい型を作る型です。

 

interface Part {
 id: number;
 name: string;
 subparts: Part[];
 updatePart(newName: string): void;
}

type FunctionPropertyName<T> = {
 [K in typeof T]: T[K] extends Function ? K ; never
}[keyof T]

type FunctionProperties<T> = Pick<T, FunctionPropertyNames<T>>

type X  = FunctionPropertyName<Part>; //"updatePart"
type Y = FunctionPropeties<Part> // {updatePart{updateName: string}: void}

 

NonfunctionProperties型

 

Mapped Types を併用してObject型から関数型以外のプロパティ名を抽出して、

 

その名称を元に関数型を除いた新しい型を作る型です。

 

interface Part [
 id: number;
 name: string;
 subpart(newName: string); void
}

type NonFunctionPropertyName<T> = {
 [K in keyof T]; T[K] extends Function ? never : K
}[keyof T]

type NonFunctionProperties<T> = Pick<T, NonFunctionPropertyNames<T>>

type X = NonFunctionPropertyName<Part>; //"id" | "name" | "subparts"
type Y = NonFunctionProperties<part>; // {id: number, name: string, subparts: Part[]}

 

Unpacked型

 

配列要素型、関数戻り型、promise.resolve引数型を取得する型です。

 

type Unpacked<T> =
 T extends (infer U)[] ? U :
 T extends (...args: any[]) => infer U ? U :
 T extends Promise<infer U> ? U
 T

type T0 = Unpacked<string> //string
type T1 = Unpacked<string[]> //string
type T2 = Unpacked<() => string> //string
type T3 = Unpacked<Promise<string>> //string
type T4 = Unpacked<Promise<string>[]> //Primise<string>
type T5 = Unpacked<unpaked<Primise<string>[]>> //string

 

Pocket
LinkedIn にシェア

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

  • この記事を書いた人

藤沢瞭介(Ryosuke Hujisawa)

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

1
2
no image 3
4
5
6
7
8
9
10
no image 11
12
13
14
15
16
17
18
19
20
21
22
23

-TypeScript