基礎からのTypeScript[インターフェース⑶]
外資系企業でソフトウェアエンジニアをしております、タロイモと言います。今日もよろしくお願いします。
TypeScriptの文法について解説しています。
今回は第六回、最終回としてTypeScriptインターフェースのユーティリティ型を説明していきます。
ユーティリティ型とは
TypeScriptには、一般的な型変換(Mapped Type, Conditional Type)を容易にするためのユーティリティ型というものがいくつか用意されています。
Mapped Type等の型変換を簡単にしたものと捉えて良いでしょう。
関数の引数や返り値の型から新しい型を生成
Parameters<T>
関数の引数の型から新しい型を抽出します。
今回はcal関数の引数の型はstringとnumberなので、[string, number]型が生成されます。
function cal(height: string, width: number): number => {
return parseInt(height) * width
};
type TypeA = Parameters<typeof cal>; // [string, number]
ReturnType<T>
関数の返り値の型から新しい型を抽出します。
function cal(height: string, width: number): number => {
return parseInt(height) * width
};
type TypeB = ReturnType<typeof cal>; //[number]
ConstructorParameters<T>
コンストラクタの引数からも同様に型を抽出できます。
class Parallelogram implements Square {
width: number;
height: number;
constructor(_width: number, _height: number){
this.width = _width;
this.height = _height;
}
getArea(): string {
return `平行四辺形の面積は${this.width * this.height}です。`;
}
}
type TypeC = ConstructorParameters<typeof Parallelogram>; // [number, number]
プロパティの設定
Readonly<T>
読み取り専用のプロパティを持つ型を生成します。
以下はFruit型のプロパティが読み取り専用になります。
interface Fruit {
name:string;
color: string;
}
let lemon: ReadOnly<Fruit> = {
name: "レモン",
color: "yellow"
};
lemon.name = "ミカン"; //エラー
指定の型を持つプロパティを作成
Record<K, T>
"Kで指定した型を持つプロパティ"の型を生成します。
以下は、number型のプロパティの値がFruit型のオブジェクトになります。
オブジェクト = {プロパティ: 値}
interface Fruit {
name:string;
color: string;
}
let lemon: Record<number, Fruit> = {
{1: {name: "レモン",
color: "yellow"}},
{2: {name: "ミカン",
color: "orange"}},
{3: {name: "リンゴ",
color: "red"}}
}
};
特定の型を除去・抽出
Exclude<T,U>
共用型のT型からU型を除外して新しい型を生成します。
type TypeD = string | number | boolean;
type TypeE = Exclude<TypeD, string>; //number | boolean
type TypeF = Exclude<TypeE, number>; //boolean
Extract<T,U>
T, U共通の型を引き抜き新しい型を生成します。
type TypeG = Extract<TypeD, number | boolean>; //number | boolean
NonNullable<T>
undefinedとnullを除外した型を生成します。
type TypeH = string | undefined;
type TypeI = NonNullable<TypeH>; //string
定義したものを必ず入れるように強制
Required<T>
Tで指定したインターフェースのプロパティの型を必須にします。
以下はcolorプロパティを省いたらエラーがでます。
interface Fruit {
name?:string;
color?: string;
}
let lemon: Required<Fruit> = {
name: "レモン",
}; // エラー
----------------------------------------------------
今回はインターフェースを応用した型チェックについて紹介しました。
TypeScriptの解説は以上になります。
良かったらこれまでのTypeScriptを復習してみてください。
今回もご精読ありがとうございました。
よろしければサポートお願いします! サポートは、サービスの開発・改良や、記事を書く際の素材費とさせていただきます。 少しでも有益な情報発信をしていけるよう努めてまいります。 是非とも応援よろしくお願いします!!!🙇♂️