Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話
Search
pvcresin
November 20, 2019
Technology
0
390
TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話
https://oweb.connpass.com/event/149918/
#OWEB で発表した内容になります。
pvcresin
November 20, 2019
Tweet
Share
More Decks by pvcresin
See All by pvcresin
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
730
text-box-trim について 1 分で
pvcresin
0
120
Web IDEの進化とそれを支える技術
pvcresin
0
98
ステップアップOSSコントリビュート
pvcresin
0
470
Webアプリケーションのアーキテクチャパターンから読み解くNext.js
pvcresin
0
410
Eight WebフロントエンドのDX向上に関する取り組み
pvcresin
0
180
React はじめの一歩
pvcresin
1
250
適当に教える最近のフロントエンド開発第一歩
pvcresin
0
160
Other Decks in Technology
See All in Technology
コンパウンド組織のCRE #cre_meetup
layerx
PRO
0
210
「タコピーの原罪」から学ぶ間違った”支援” / the bad support of Takopii
piyonakajima
0
110
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
2
1.8k
私のMCPの使い方
tsubakimoto_s
0
120
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
3l4l5
1
130
「魔法少女まどか☆マギカ Magia Exedra」におけるバックエンドの技術選定
gree_tech
PRO
0
100
Kubernetes self-healing of your workload
hwchiu
0
340
生成AI時代のセキュアコーディングとDevSecOps
yuriemori
0
150
生成AIを安心して活用するために──「情報セキュリティガイドライン」策定とポイント
gree_tech
PRO
0
190
React19.2のuseEffectEventを追う
maguroalternative
2
590
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
140
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
250
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Practical Orchestrator
shlominoach
190
11k
Site-Speed That Sticks
csswizardry
13
920
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Facilitating Awesome Meetings
lara
57
6.6k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Designing for humans not robots
tammielis
254
26k
4 Signs Your Business is Dying
shpigford
185
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Pragmatic Product Professional
lauravandoore
36
7k
Transcript
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 の 暗黙的な型変換 に助けられていた部分が浮き彫りに • 関数がやるべきことに向き合えた •
場合によっては分割 • 命名の再考 • ある種のテスト代わりになった 導入してよかったこと
現状
None
俺たちの戦いはこれからだ