TypeScriptまとめ集
目次
1.ユーティリティ型とは？
既存の型を元にした新規型を手軽に生成できる。
2.ユーティリティ型早見表
| 書き方 | 変換結果 |
|---|---|
Partial<T>
|
任意型に変換 |
Readonly<T>
|
読み取り専用に変換 |
Required<T>
|
必須型に変換 |
Record<K,T>
|
指定の型を持つプロパティ群を生成 |
Pick<T,K>
|
既存の型から特定のプロパティだけを抽出 |
Omit<T,K>
|
Pickと同じ |
Exclude<T,U>
|
既存の型から特定の型を除外 |
Extract<T,U>
|
Excludeと同じ |
NonNullable<T>
|
null｜undefinedを除外 |
Parameters<T>
|
関数型の引数を元にタプル型を生成 |
ReturnType<T>
|
関数型の戻り値型を生成 |
ConstructorParameters<T>
|
コンストラクターの引数型を元にタプル型を生成 |
ThisType<T>
|
関数の中で使用されるthisの型を指定 |
ThisParameterType<T>
|
関数型のthis引数の型を抽出 |
OmitThisParameter<T>
|
関数型のthis引数の型を除外した型 |
Uppercase<Stringtype>
|
大文字に変換 |
Lowercase<Stringtype>
|
小文字に変換 |
Capitalize<Stringtype>
|
１文字目を大文字に変換 |
Uncapitalize<Stringtype>
|
１文字目を小文字に変換 |
3.ユーティリティ型サンプルコード
Partial<T>
型Tのプロパティを**任意型(省略可能)**に変換
typescript()
//インターフェイスを定義
interface sample{
name: string,
age: number
}
//sampleの全プロパティを任意型(~?)に変換
type sampleOp = Partial<sample>;
//これと同義
interface sampleOp {
name?: string,
age?: number
}
Readonly<T>
型Tのプロパティを読み取り専用に変換
typescript(Readonly)
//インターフェイスを定義
interface sample{
name: string,
age: number
}
//sampleの全プロパティを読み取り専用に変換
type sampleOp = Readonly<sample>;
//これと同義
interface sampleOp {
readonly name: string,
readonly age: number
}
Required<T>
型Tのプロパティを必須プロパティに変換する
typescript(Required)
//インターフェイスを定義
interface sample{
name: string,
age: number
}
//sampleの全プロパティを必須プロパティに変換
type sampleOp = Required<sample>;
Record<K,T>
型Kのプロパティ名で、型は型Tのプロパティ群を生成する。
typescript(Record)
//インターフェイスを定義
interface sample{
name: string,
age: number
}
//{'AAA':sample, 'BBB':sample}のプロパティを持つ型を生成
type sampleOp = Record<'AAA'|'BBB', sample>;
//これと同義
interface sampleOp {
AAA: sample
BBB: sample
}
Pick<T,K> / Omit<T,K>
型Tから型Kを抽出する
typescript(Pick,Omit)
//インターフェイスを定義
interface sample{
name: string,
age: number
}
//sampleのnameプロパティだけを抽出
type sampleOp = Pick<sample, 'name'>;
//これと同義
interface sampleOp {
name: string
}
Exclude<T,U> / Extract<T,U>
型Tから型Uを除外する
typescript(Exclude,Extract)
//インターフェイスを定義
interface sample{
name: string,
age: number
}
//sampleのnameプロパティを除外
type sampleOp = Extract<sample, 'name'>;
//これと同義
interface sampleOp {
age: number
}
NonNullable<T>
型Tからnull | undefinedの方を持つプロパティを除外する
typescript(NonNullable)
//インターフェイスを定義
interface sample{
name: string,
nul: null,
unde: undefined
}
//sampleのnull|undefinedの型を持つプロパティを除外
type sampleOp = NonNullable<sample>;
//これと同義
interface sampleOp {
name: string,
}
Parameters<T> / ReturnType<T> / ConstructorParameters<T>
- 与えられた関数型の引数を元にタプル型を生成する 。
- ReturnTypeは関数型の戻り値型をタプル型として返す。
- ConstructorParametersはコンストラクターの引数型を元にタプル型として返す。
typescript(Parameters,ReturnType,ConstructorParameters)
//引数付きの関数を定義
function sample(name:string, age:number){ ... }
//sampleの引数を元にタプル型を生成
type sampleOp = Parameters<typeof sample>;
ThisType<T>, ThisParameterType<T>, OmitThisParameter<T>
- ThisTypeは関数の中で使用されるthisの型をTに指定できる。（-noImplicitThisを設定する必要あり）
- ThisParameterTypeは関数型Tのthis引数の型を抽出した型を生成する。（--strictFunctionTypesを設定する必要あり）
- OmitThisParameterは関数型Tのthis引数の型を取り除いた型を生成する。（--strictFunctionTypesを設定する必要あり）
typescript(ThisType,ThisParameterType,OmitThisParameter)
//ThisType
interface A {
name: string;
}
interface B {
hello(): void;
}
//thisの型を指定する
const obj: B & ThisType<A> = {
hello() {
console.log(`Hello, ${this.name}`);
},
};
//ThisParameterType
function sample(this: number) {
return this.toString()
}
type TypeA = ThisParameterType<typeof sample> //number
//OmitThisParameter
function sample(this: number) {
return this.toString()
}
type TypeA = OmitThisParameter<typeof sample> //string
Uppercase<StringType> / Lowercase<StringType>
TypeScript 4.1で追加。
Uppercaseは全てstring型のプロパティのプロパティ名を大文字にする。
Lowercaseは全てstring型のプロパティのプロパティ名を小文字にする。
typescript(Uppercase,Lowercase)
//Uppercase
//sampleを大文字に変換
type sample = Uppercase<'sample'>;
//これと同義
type sample = 'SAMPLE';
//Lowercase
//sampleを小文字に変換
type sample = Lowercase<'SAMPLE'>;
//これと同義
type sample = 'sample';
Capitalize<StringType> / Uncapitalize<StringType>
TypeScript 4.1で追加。
Capitalizeは全てstring型のプロパティのプロパティ名の１文字目を大文字にする。
Uncapitalizeは全てstring型のプロパティのプロパティ名の１文字目を小文字にする。
typescript(Capitalize,Uncapitalize)
//Capitalize
//sampleの１文字目を大文字に変換
type sample = Capitalize<'sample'>;
//これと同義
type sample = 'Sample';
//Uncapitalize
//sampleの１文字目を小文字に変換
type sample = Uncapitalize<'Sample'>;
//これと同義
type sample = 'sample';