移行の進め方

全部いっぺんには変えない

この章では、React入門で書いた JavaScript のコードを TypeScript に移します。動いているものを触るので、手順が要ります。

いちばんやってはいけないのが、全ファイルの拡張子を一度に .ts へ変えることです。エラーが何百件も出て、どれが本当のバグでどれが型の書き忘れなのか分からなくなります。

依存の下から順に上げる

順番は、他のファイルに頼っていないものからです。ポートフォリオのコードなら次の順になります。

1 番目はデータです。作品一覧やプロフィールの中身で、何も import していません。2 番目はユーティリティ関数です。データの形は使いますが、画面は知りません。3 番目が画面まわりです。データにも関数にも頼っています。

下から上げていくと、上のファイルを移すころには、下の型がもう決まっています。逆順にすると、決まっていない型を仮置きしながら進むことになり、二度手間です。

1 ファイルずつ、型を付けてから中身

1 ファイルの中でも手順は同じです。第1章のつくる回でやった順番を、そのまま大きくするだけです。

手順 2 と 3 を入れ替えないでください。先に中身を直そうとすると、何を直したのか型が教えてくれません。型を付けてから初めて、機械が間違いを探し始めます。

any は逃げ道として使ってよい

移行中、どうしても型が決まらない箇所が出てきます。そこは一時的に any を置いて先に進んでかまいません。

ただし必ず印を残します。印の無い any は、二度と直されないまま残ります。移行が終わったあとに any を検索して、1 つずつ潰していくのが最後の仕事です。

進み具合が見えるようにする

対象のファイルを並べて、済んだかどうかを記録しておくと止まりません。

何件中何件が終わったのかが見えていると、途中でやめにくくなります。この一覧そのものは、この章の最後の演習でもう一度出てきます。

手を動かす

自分の手元にある JavaScript のファイルを 4 つか 5 つ選んで、上の形の一覧を書いてみてください。並べる順番は、他のファイルに頼っていないものが先です。次のレッスンから、その 1 行目にあたるデータ層を実際に移します。