型エラーを潰す｜コードで実践

エラーは怒っているのではない

移行の途中で、tsc が何十件もエラーを出すことがあります。ここで手が止まる人が多いのですが、エラーは全部「ここが噛み合っていません」という報告です。読み方さえ決まっていれば、順番に片付くだけの作業です。

エラーは連鎖します。1 件直すと 5 件消えることが普通にあります。だから全部読んでから直そうとせず、いちばん上の 1 件だけを見て直し、もう一度走らせます。

読む場所は 3 つです。ファイル名と行番号、TS から始まる番号、そして本文です。

src/utils/count.ts:2:7 - error TS2322:
  Type 'number' is not assignable to type 'string'.

2 行目の 7 文字目で、string と約束したところに number を入れている、と言っています。

移行中に出るエラーは、ほとんどこの 4 種類です。

TS7006 Parameter 'x' implicitly has an 'any' type.

引数に型を書き忘れています。書けば消えます。

TS2322 Type 'A' is not assignable to type 'B'.

入れようとした値の型が、入れ先の型と違います。どちらが間違っているのか考えます。

TS2339 Property 'lenght' does not exist on type 'string[]'.

無いプロパティを読んでいます。打ち間違いか、型の指定が違うかのどちらかです。

TS18047 'label' is possibly 'null'.

null かもしれない値を、そのまま使っています。分岐で確かめてから使います。

エラーが出たとき、直す先はコードとは限りません。

function workTitle(work: Work): string {
  return work.url;
}
// エラー Property 'url' does not exist on type 'Work'.

これは url を読むのが悪いのではなく、Work に url を書き忘れていた、という可能性があります。データの現物を見て、本当にその項目があるなら、Work のほうに url?: string を足すのが正解です。

エラーを黙らせるだけなら as any を付ければ消せます。ですが消えるのはエラーだけで、噛み合っていない事実は残ります。理由が分からないまま消さないでください。

演習では、移行の途中でエラーが 4 件出ている関数を渡します。上から 1 件ずつ読んで、全部消してください。エラーが消えたとき、計算の結果も正しくなっているはずです。