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

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. 現状

17. None

18. 俺たちの戦いはこれからだ