TypeScript まとめ２（ユーティリティ型）

TypeScriptまとめ集

1. 型について
2. ユーティリティ型
3. モジュール化
4. インストール〜コンパイル方法

目次

1. ユーティリティ型とは？
2. ユーティリティ型早見表
3. ユーティリティ型サンプルコード

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';