はじめての型注釈｜コードで実践

変数の後ろにコロンと型名

型注釈は、名前の後ろに型を書き添えるだけです。

const workName: string = "プロフィールサイト";
const workCount: number = 3;
const isPublished: boolean = true;

string が文字列、number が数値、boolean が true と false です。この 3 つで、当面のほとんどが書けます。

約束を破ると、その行でエラーになります。

const workCount: number = "3";
// エラー Type 'string' is not assignable to type 'number'.

関数の引数と戻り値にも付ける

型注釈がいちばん効くのは関数です。引数には名前の後ろに、戻り値には引数の丸カッコの後ろに書きます。

function workLabel(title: string, count: number): string {
  return title + "ほか" + count + "件";
}

こう書いておくと、呼び出す側の間違いも捕まります。

workLabel("プロフィールサイト", "3");
// エラー Argument of type 'string' is not assignable to parameter of type 'number'.

workLabel("プロフィールサイト");
// エラー Expected 2 arguments, but got 1.

引数の順番を取り違えた、数を渡し忘れた、といった事故が、実行する前に分かります。関数を書いた本人ではなく、あとから使う人を守るのが型注釈の本当の役目です。

付けないと怒られる場所がある

このコースの設定では、関数の引数に型が無いとエラーになります。

function workLabel(title, count) {
  return title;
}
// エラー Parameter 'title' implicitly has an 'any' type.

any は「どんな型でもよい」を意味する型で、これが付くと検査が働かなくなります。黙って any になるのを防ぐため、引数だけは必ず自分で書く、という決まりにしてあります。

戻り値のほうは書かなくてもエラーになりません。理由は次のレッスンで扱います。

手を動かす

演習では、型注釈が無いために動かない関数を渡します。エラーメッセージを読みながら、引数に型を足して通してください。どの引数が何の型なのかは、関数の中身と呼び出し例から読み取れます。

はじめての型注釈

変数の後ろにコロンと型名

関数の引数と戻り値にも付ける

付けないと怒られる場所がある

手を動かす

要件

入出力例

ヒント

メモ