型は何を守るのか｜基礎を学ぶ

動くのに、間違っているコード

JavaScript は書いたとおりに動きます。問題は、書き間違えたとおりにも動いてしまうことです。

次のコードは、ポートフォリオに公開した作品の件数を画面に出そうとしています。

const works = ["プロフィールサイト", "自己紹介カード", "スキル一覧の表"];

console.log("公開作品は" + works.lenght + "件です");

実行すると 公開作品はundefined件です と出ます。length を lenght と打ち間違えただけです。JavaScript は存在しないプロパティを読んでもエラーにせず、undefined を返します。だから止まりません。止まらないまま、おかしな文字列が画面に出ます。

気付くのが遅いほど高くつく

この手の間違いは、もう一つよくある形があります。

const workCount = "3";

console.log(workCount + 1); // 31

workCount は数字に見えますが、正体は文字列です。文字列と数値を + でつなぐと、JavaScript は足し算ではなく連結を選びます。4 ではなく 31 になります。

どちらも、実行して画面を見るまで気付けません。フォームから来た値やサーバーから返ってきた値が相手だと、特定の入力のときだけ壊れる、という一番やっかいな形になります。

TypeScript は実行する前に止める

TypeScript は、この 2 つを書いている最中に指摘します。

const works: string[] = ["プロフィールサイト", "自己紹介カード"];

console.log(works.lenght);
// エラー Property 'lenght' does not exist on type 'string[]'.

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

works は文字列の配列だ、workCount は数値だ、と先に宣言しておくと、その約束を破ったところでエラーが出ます。実行する前に、エディタの中で赤い波線として出ます。

つまり型は、コードに書いた約束をコンピュータに見張らせるしくみです。人間のレビューでは見落とす打ち間違いを、機械が毎回同じ精度で拾ってくれます。

手を動かす

このコースのエディタでは、実行ボタンを押す前に型が検査されます。まず壊れる側を体験してください。次の 1 行を書いて実行してみます。

const workCount: number = "3";
console.log(workCount);

実行結果ではなく型エラーが返ってくるはずです。エラーの文面を読んで、どの型がどの型に入らないと言われているか確かめてください。次のレッスンから、その約束を自分で書いていきます。