TypeScriptの関数はどのように役立つのか（前編）：TypeScriptのTypeあれこれシリーズ（3）

altJS、すなわち、JavaScriptの代わりとなる言語の筆頭である「TypeScript」。TypeScriptという言語名が示す通り、JavaScriptに「Type」、つまり、型の概念を持ち込んだものです。本連載では、このTypeScriptの型に関して、さまざまな方向から紹介していきます。前回はJavaScriptにはない、TypeScript独自の型を紹介しました。今回は関数で型を扱う場合を紹介していきます。基本となる引数や戻り値の型、さらには関数そのものの型を紹介します。

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

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

関数の型はどう役立つのか

TypeScriptで関数を作る際の基本は、JavaScriptと同じです。ただし、型指定が追加されていきます。型指定があることで、どのように便利になるのか、そこから話を始めていきましょう。

JavaScriptの関数の問題点

　JavaScriptで関数を定義する場合、リスト1のようなコードを記述します。

function divide(num1, num2) {
	return num1 / num2;
}

リスト1

　この関数「divide()」は引数を2個受け取り、引数の割り算を実行した結果を返します。この関数を定義した際、処理内容から、その引数には数値が渡されることを前提にしています。ところが、JavaScriptでは、リスト2のコードのように、引数として文字列を渡しても、問題なく実行できてしまいます。

const ans = divide("こんにちは", "さようなら");

リスト2

　もちろん、関数の実行結果であるansは「NaN」（Not a Number）となり、さまざまな問題の原因になります。

関数の引数の型を指定できるTypeScript

　TypeScriptならば、コーディング段階でエラーにすることができます。それが、引数の型指定です。先ほどのdivide()関数の引数にデータ型を定義すると、リスト3のようになります。

function divide(num1: number, num2: number) {
	return num1 / num2;
}

リスト3

　このように定義した関数の引数に対して文字列を渡そうとすると、図1のようなエラーになります（以下、「Visual Studio Code」を利用）。

図1　数値型の引数に文字列を渡そうとしてエラーになった画面

関数の戻り値にも型を指定できる

　同様に、戻り値に対しても型指定ができます。例えば、先ほどのdivide()関数のように、戻り値として数値型を想定している関数の場合は、リスト4のように記述します。

function divide(num1: number, num2: number): number {
	return num1 / num2;
}

リスト4

　このように戻り値のデータ型「number」を定義した関数内で、違うデータ型の値を返すコードを記述すると、図2のようなエラーになります。

図2　数値型が戻り値の関数で文字列を返そうとしてエラーになった画面

　さらにreturn文を記述し忘れた場合も、図3のようなエラーになります。

図3　数値型が戻り値の関数でreturn文を記述せずにエラーになった画面

戻り値なしを表すvoid型

　戻り値のない関数を定義したい場合は、戻り値の型として「void」と記述します。例えば、次のような関数です。

function divide(num1: number, num2: number): void {
	const ans = num1 / num2;
	console.log(ans);
}

リスト5

　この場合、リスト4とは逆に、関数内にreturn文を記述すると、図4のようなエラーになります。

図4　戻り値がvoidの関数でreturn文を記述してエラーになった画面

　ここまでの内容を踏まえて、データ型を記述した関数シグネチャを構文としてまとめておきます。

［構文］関数シグネチャ
function 関数名(引数: データ型, ……): 戻り値のデータ型

特殊な戻り値の型を表すnever

　戻り値のデータ型には特殊なものがあります。「never」です。neverというデータ型は、「発生することがない値」を表し、戻り値がneverの関数は、そもそも制御が元に戻ってこない、という意味になります。例えば、次のような関数です。