自由移行
教材ではないコードでやってみる
ここまでは、こちらが用意した JavaScript を移してきました。最後に、自分が過去に書いたコードを 1 本選んで移してみてください。教材と違って、型が素直に決まらない箇所が必ず出てきます。そこで詰まった経験が、この章でいちばん残るものです。
選び方
選ぶ基準は 3 つです。1 つ目は 100 行以下であること。2 つ目は、画面を触らない純粋な処理が中心であること。3 つ目は、動いていることを自分で確かめられることです。
JavaScript入門や実践JavaScriptで書いた関数、家計簿の集計、日付の整形あたりがちょうどよい大きさです。
手順は変わらない
やることは第7章の 3 レッスンと同じです。
プレーンテキスト
1. .js を .ts にする
2. 引数と、外に出す値に型を付ける
3. 出たエラーを上から 1 件ずつ読んで直す
4. any を検索して、残っていたら潰す手順 4 を忘れないでください。移行の途中で置いた仮の any は、放っておくと必ず残ります。
詰まりやすいところ
自分のコードでよく起きるのが、1 つの変数に別々の形を入れていた、という事態です。
TypeScript
let result = "";
result = 0;
// エラー Type 'number' is not assignable to type 'string'.JavaScript では書けてしまいますが、読む人には追えません。ここは型に合わせてコードを直す場面です。変数を 2 つに分けるのが正解のことが多いです。
もう 1 つは、null が返るかもしれない関数です。find や getElementById がこれにあたります。使う前に確かめる、という形に書き直します。
進み具合を数える
移すファイルが複数あるときは、第47レッスンで書いた一覧を更新しながら進めます。
プレーンテキスト
works.ts 済
format.ts 未
count.ts 未残りが見えていると、今日どこまでやるかを決められます。演習では、この一覧そのものを扱う関数を書きます。
手を動かす
移行の進み具合を報告する関数を作ってください。自分のプロジェクトに当てはめて動かせる形にしてあります。
この関数を書いたら、実際に自分のコードを 1 本移してみてください。エラーが 0 件になったところが、このコースの本当の修了地点です。
要件
- ファイル 1 件の形を
MigrationFileという名前で定義する - 引数と戻り値に型を付ける
- 対象が 1 件も無いときは
移行対象がありませんを返す - 全部終わっているときは
N件すべて移行済みですを返す - 途中のときは
N件中M件が移行済みです。残りは...を返す
入出力例
migrationReport([{"done":true,"name":"works.ts"},{"done":false,"name":"format.ts"},{"done":false,"name":"count.ts"}]) → "3件中1件が移行済みです。残りはformat.ts、count.ts"
migrationReport([{"done":true,"name":"works.ts"}]) → "1件すべて移行済みです"
migrationReport([]) → "移行対象がありません"
migrationReport([{"done":false,"name":"works.ts"},{"done":false,"name":"format.ts"}]) → "2件中0件が移行済みです。残りはworks.ts、format.ts"
migrationReport([{"done":true,"name":"works.ts"},{"done":true,"name":"profile.ts"},{"done":false,"name":"form.ts"},{"done":true,"name":"count.ts"}]) → "4件中3件が移行済みです。残りはform.ts"ヒント
