連載
» 2021年11月26日 05時00分 公開

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

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

[齊藤新三(著)/山田 祥寛(監修),@IT]

この記事は会員限定です。会員登録(無料)すると全てご覧いただけます。

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

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の関数は、そもそも制御が元に戻ってこない、という意味になります。例えば、次のような関数です。

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。