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

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

鳥山らいか / Raika Toriyama Sansan 株式会社　Eight 事業部　フロントエンドエンジニア @pvcresin

JavaScript に静的型付けがついた言語 TypeScript とは

• API の定義ファイルをパースし、フロントエンドで使うデータ形式の JS ファイルを自動生成 • 安全で硬い作りにしたい社内向けライブラリフロントエンドバックエンド
API の定義ファイル

やったこと

Step1: 学ぶ

• 公式ドキュメント 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　吉井健文 (著) 参考になったもの

Step2: 準備

• 1ファイルずつ置き換えていく • 型チェックと変換には tsc コマンドを採用導入方法を決める tsc いままでこれから
/src /src /compiled /dist /dist

Step3: 置き換え

拡張子でルールを分けるよう変更 ESLint の設定

場所 • よく薦められるのはテストコードから • 今回はライブラリ本体のコードから始めた • テストコードがない部分があった • 本体のコードが何をしているか不明な場所が多かったファイル
• 外部のライブラリのみ import しているもの • import がないもの • 他のファイルを import しているもの置き換える順番

• DefinitelyTyped：http://definitelytyped.org/ ◦ @types/<package name> で探す • npm：https://www.npmjs.com/ ◦ 型定義している
package がないか探す • 自分で定義 ◦ デフォルトだと src/@types/*.d.ts 型定義ファイル

導入してよかったこと

• 型安全でない実装がエラーにより可視化された • JS の暗黙的な型変換に助けられていた部分が浮き彫りに • 関数がやるべきことに向き合えた •
場合によっては分割 • 命名の再考 • ある種のテスト代わりになった導入してよかったこと

現状

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

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

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

pvcresin

More Decks by pvcresin

Other Decks in Technology

Featured

Transcript