Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

06944c671661e362a4182bd8c1f19c79?s=47 pvcresin
November 20, 2019

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

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

06944c671661e362a4182bd8c1f19c79?s=128

pvcresin

November 20, 2019
Tweet

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. 俺たちの戦いはこれからだ