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
360
TS 未経験者が 社内向け JS ライブラリを TS に置き換えている話
https://oweb.connpass.com/event/149918/
#OWEB で発表した内容になります。
pvcresin
November 20, 2019
Tweet
Share
More Decks by pvcresin
See All by pvcresin
text-box-trim について 1 分で
pvcresin
0
83
Web IDEの進化とそれを支える技術
pvcresin
0
53
ステップアップOSSコントリビュート
pvcresin
0
450
Webアプリケーションのアーキテクチャパターンから読み解くNext.js
pvcresin
0
360
Eight WebフロントエンドのDX向上に関する取り組み
pvcresin
0
140
React はじめの一歩
pvcresin
1
230
適当に教える最近のフロントエンド開発第一歩
pvcresin
0
130
Other Decks in Technology
See All in Technology
Iceberg Meetup Japan #1 : Iceberg and Databricks
databricksjapan
0
380
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
100
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
180
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
300
脳波を用いた嗜好マッチングシステム
hokkey621
0
290
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
130
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
640
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
330
AWSを活用したIoTにおけるセキュリティ対策のご紹介
kwskyk
0
380
Share my, our lessons from the road to re:Invent
naospon
0
150
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
160
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Typedesign – Prime Four
hannesfritz
40
2.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Building an army of robots
kneath
303
45k
Building Applications with DynamoDB
mza
93
6.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Designing for humans not robots
tammielis
250
25k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
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
俺たちの戦いはこれからだ