TypeScriptの型操作にまつわるあれこれ：TypeScriptのTypeあれこれシリーズ（11）

altJS、すなわち、JavaScriptの代わりとなる言語の筆頭であるTypeScript。そのTypeScriptは、言語名が示す通り、JavaScriptにType、つまり、型の概念を持ち込んだものです。本連載では、このTypeScriptのType（型）に関して、さまざまな方向から紹介していきます。前回は、データ型を定義できる仕組みとしてインタフェースについて、あれこれ紹介しました。本連載も、いよいよ最終回です。その最終回として、既存の型定義やオブジェクトから新たな型定義を作成できるユーティリティー型について、あれこれ紹介していきます。

[齊藤新三（著）／山田祥寛（監修），WINGSプロジェクト]

連載：TypeScriptのTypeあれこれシリーズ

ユーティリティー型とは

　TypeScriptには、既存の型定義やオブジェクトから新たな型定義を作成できる仕組みがあります。これをユーティリティー型といいます。

全てをオプションにできるPartialユーティリティー

　ユーティリティー型の具体例を、1つ紹介します。例えば、リスト1のようなコードがあるとします。

interface BMIData {  // (1)
	name: string;
	height: number;
	weight: number;
	age: number;
}
function showBMIData(data: BMIData) {  // (2)
	:
}
const taro: BMIData = {  // (3)
	name: "田中太郎",
	height: 170.5,
	weight: 70.4,
	age: 22
}
showBMIData(taro);  // (4)
const jiro = {  // (5)
	name: "鈴木二郎"
}
showBMIData(jiro);  // (6)

リスト1

　リスト1の（1）は、前回のリスト4のインタフェースBMIDataと同じです。（2）は、このBMIDataを引数の型とする関数showBMIData()です。（4）のようにこの関数を利用する場合、引数として渡すオブジェクトtaroは、（3）のようにBMIDataの全てのプロパティが定義されている必要があります。そのため、（5）のようにnameプロパティしか定義されていないjiroオブジェクトを、（6）のように引数としてshowBMIData()を実行しようとすると、エラーとなります。

　ところが、引数をリスト2の（1）のように記述すると、（2）や（3）のようにtaroやjiroを渡してもエラーとなりません。

function showPartialBMIData(data: Partial<BMIData>) {  // (1)
	:
}
showPartialBMIData(taro);  // (2)
showPartialBMIData(jiro);  // (3)

リスト2

　この（1）の引数で記述した「Partial<>」が型変換ユーティリティーの一つであり、ジェネリクス（< >の中）で指定したオブジェクト型のプロパティを全てオプション（省略可能）へと変更します。すなわち、Partial<BMIData>は、リスト3の型定義と同等の型を表すようになります。

{
	name?: string;
	height?: number;
	weight?: number;
	age?: number;
}

リスト3

型変換ユーティリティーの一覧