つくる - バグを型で捕まえる｜コードで実践

第1章でやったことを 1 本にする

この回で新しい知識は出てきません。第1章で覚えたことだけを使って、最初のレッスンで見たバグ入りのコードを片付けます。

使うのは次の 3 つです。1 つ目は引数への型注釈です。2 つ目は、型を付けると tsc が間違いを指摘するという性質です。3 つ目は、指摘を読んで直すという手順そのものです。

直す相手

公開中の作品が何件あるかを数えて、一行にまとめる関数です。JavaScript として書かれていて、実行しても止まりませんが、答えが合っていません。

function summarizePortfolio(titles, published) {
  let count = "0";
  for (let i = 0; i < titles.lenght; i++) {
    if (published[i]) {
      count = count + 1;
    }
  }
  return "公開作品は" + count + "件です";
}

仕込んである間違いは 2 つです。どちらも第1章で見た形をしています。

型を付けてから読む

先に直そうとしないでください。まず引数に型注釈を付けます。titles は作品タイトルの配列なので string[]、published は公開しているかどうかの配列なので boolean[] です。

型を付けた瞬間に tsc が喋りはじめます。

Property 'lenght' does not exist on type 'string[]'. Did you mean 'length'?
Type 'string' is not assignable to type 'number'.

1 つ目は length の打ち間違いです。titles.lenght は undefined になり、i < undefined は最初から false なので、ループが 1 周も回っていませんでした。

2 つ目は count の初期値です。"0" は文字列なので、count + 1 は足し算ではなく連結になります。仮にループが回っていたら、答えは "011" のような文字列になっていました。

どちらも、型を付けるまでは何のエラーも出ていなかったことに注目してください。型注釈を書くという作業は、コンピュータに調べさせるための下準備です。

手を動かす

引数に型を付け、tsc の指摘を 1 つずつ読んで直してください。エラーが 1 つも出なくなったら提出します。

直す順番は、必ず型を付けてから中身、です。この順番は、あとで既存の JavaScript を TypeScript へ移していくときにも、そのまま使えます。

つくる - バグを型で捕まえる

第1章でやったことを 1 本にする

直す相手

型を付けてから読む

手を動かす

要件

入出力例

ヒント

メモ