関数に型をつける

01 / 05

引数のうしろに型を書く

関数の引数にも、変数と同じように : で型を書く。

これを書いておくと、まちがった種類の値を渡したときに、呼んだところでエラーになるよ。関数の中まで探しに行かなくていい。

function aisatsu(namae: string) {  console.log(namae + "さん、こんにちは");}aisatsu("ゆい");

実行結果

ゆいさん、こんにちは

02 / 05

TypeScript は、引数の型を書き忘れると教えてくれる。「パラメーター 'namae' の型は暗黙的に 'any' になります」というのがそれだよ。

any は「どんな型でもよい」という意味で、これを許すと型を書いた意味がなくなってしまう。だから引数には必ず型を書こう。

function aisatsu(namae) {  console.log(namae);}

実行結果

型のエラー: パラメーター 'namae' の型は暗黙的に 'any' になります。

03 / 05

関数が値を返すなら、その型は引数のかっこのうしろに書く。

function 名前(引数): 返す型 { の順だよ。ここに書いておくと、まちがった種類を返したときに関数の中でエラーになる。

function tasu(a: number, b: number): number {  return a + b;}console.log(tasu(3, 4));

実行結果

04 / 05

表示するだけで何も返さない関数には void と書く。「返す値は無い」という意味だよ。

書かなくても動くけれど、書いておくと「この関数は値を返さないつもりだ」と読む人に伝わる。

function shirase(kotoba: string): void {  console.log("【おしらせ】" + kotoba);}shirase("あしたは休み");

実行結果

【おしらせ】あしたは休み

05 / 05

number を受け取る関数に文字列を渡すと、呼んだ行でエラーになる。

JavaScript なら、そのまま動いて "32" のような変な結果が出るまで気づけない。型を書いておくと、ここで止まってくれるよ。

function nibai(n: number): number {  return n * 2;}console.log(nibai("3"));

実行結果

型のエラー: 型 'string' の引数を型 'number' のパラメーターに割り当てることはできません。