TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話

https://oweb.connpass.com/event/149918/ #OWEB で発表した内容になります。

Transcript

1. TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話 @pvcresin OWEB #9
2. 鳥山 らいか / Raika Toriyama Sansan 株式会社　Eight 事業部　フロントエンドエンジニア @pvcresin
3. JavaScript に静的型付けがついた言語 TypeScript とは
4. • API の定義ファイルをパースし、フロントエンドで使うデータ形式の JS ファイルを自動生成 • 安全で硬い作りにしたい 社内向けライブラリ フロントエンド バックエンド API の定義ファイル
5. やったこと
6. Step1: 学ぶ
7. • 公式ドキュメント https://www.typescriptlang.org/docs/home.html • Qiita：TypeScript の型入門 https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a • 記事：がんばらない TypeScript https://employment.en-japan.com/engineerhub/entry/2019/04/16/103000 • 書籍：実践 TypeScript　吉井 健文 (著) 参考になったもの
8. Step2: 準備
9. • 1ファイルずつ置き換えていく • 型チェックと変換には tsc コマンドを採用 導入方法を決める tsc いままで これから /src /src /compiled /dist /dist
10. Step3: 置き換え
11. 拡張子でルールを分けるよう変更 ESLint の設定
12. 場所 • よく薦められるのはテストコードから • 今回はライブラリ本体のコードから始めた • テストコードがない部分があった • 本体のコードが何をしているか不明な場所が多かった ファイル • 外部のライブラリのみ import しているもの • import がないもの • 他のファイルを import しているもの 置き換える順番
13. • DefinitelyTyped：http://definitelytyped.org/ ◦ @types/<package name> で探す • npm：https://www.npmjs.com/ ◦ 型定義している package がないか探す • 自分で定義 ◦ デフォルトだと src/@types/*.d.ts 型定義ファイル
14. 導入してよかったこと
15. • 型安全でない実装がエラーにより可視化された • JS の 暗黙的な型変換 に助けられていた部分が浮き彫りに • 関数がやるべきことに向き合えた • 場合によっては分割 • 命名の再考 • ある種のテスト代わりになった 導入してよかったこと
16. 現状
18. 俺たちの戦いはこれからだ