TypeScript の型とお作法

https://digdig.connpass.com/event/315640/ で発表した資料です

Transcript

1. TypeScript の型とお作法 手強いコードベースと向き合ってきた 僕のお気持ち 2024 春 2024/05/11 札幌ITでぃぐでぃぐ会 vol.1 ~TypeScript 勉強会~ 渡辺隼人
2. 自己紹介 • 渡辺隼人 • 株式会社サーバーワークス • 札幌在住 (2023/7 ~) • any 撲滅委員会として活動中 • X: @nabecmdctrl
3. はじめに • TypeScript はスーパーセットということを覚えておこう • コンパイラはだませる • 過去 1 年間で 350 件ほど PR レビューを実施した者の話です • コードは必ずしもコピペで問題なく動くもモノではないです • 今日の話は僕の考える最強の～系なので参考程度にどうぞ • まさかり待ってます
4. 本日のお品書き • object を typeof 演算子で評価するのは 気を付けて • Array.filter に気を付ける • 型ガード • Input の型 • any 撲滅委員会 • 純関数委員会 • 配列を index で操作するのは避けたい • Truthy, Falsy の評価に気を付けよう • Union 混ぜるな危険 • eslint-disable はライン指定 • Array.map forEach を使い分ける • as unknown as で上書き • 配列は空配列で初期化するとよい • 不要なオプショナルアクセス演算子を 削除したい • NaN で？ • Utility Type を使おう • null と undefined を同時に check • 型宣言 • Wrapper Library で型が提供されていない 場合もあきらめない
5. object を typeof 演算子で評価するのは気を付けて • 配列や null も object Why • typeof - JavaScript | MDN 私のお気持ち • どちらかを使いましょう • type predicates • Zod
6. Array.filter に気を付ける • 型推論されません Why • コンパイラおバカ • Infer type predicates from function bodies using control flow analysis お気持ち • TypeScript はスーパーセット だね
7. 型ガード • 型を判別しましょう Why • 型を確定させないと意図し ているプロパティにアクセ スできない お気持ち • in 演算子とかでむりくり型 推論するのやめてくれ
8. any 撲滅委員会 • any は型という概念を消す Why • 型がみえないよ～ • TypeScript 使っている意味を 考えたい お気持ち • no-explicit-any • unknown を使う
9. 純関数委員会 • プリミティブ以外は参照渡 しになっちゃう Why • プログラムの原則でもある • 副作用は避けたい お気持ち • no-param-reassign
10. 配列を index で操作するのは避けたい • index 操作だと配列の範囲を 考慮した型推論がされない Why • なんで？ お気持ち • オブジェクトに • したらいいよね
11. Truthy, Falsy の評価に気を付けよう • Truthly, Falsy な値を評価をす ると。。 Why • 言語的にそうなんすね。 きっと お気持ち • strict-boolean-expressions
12. Union 混ぜるな危険 • Union で型定義すると何が何 だかわからない Why • どっちの型かわからないの。 お気持ち • Generics 使おう
13. eslint-disable はライン指定 • // eslint-disable-next-line をつかおう！ Why • ファイル指定にすると他の lint 警告・エラーを見落とし ます。 お気持ち • 同上
14. Array.map forEach を使い分ける • Array.map: 元の配列を変換し、 変換後の新しい配列を返す • Array.forEach: 各要素に対し て順番に関数を実行し、そ の関数による副作用をもた らす。 Why • 言語が提供している機能の 目的に沿って記述したい お気持ち • 可読性を意識すると選択す べきメソッドがわかるはず
15. as unknown as で上書き • どうしても型があわないと きで動作が担保できるケー スはあり！ Why • コンパイラはだませる！ お気持ち • ランタイムと合わせるなら ありだと思う
16. 配列は空配列で初期化するとよい • nullish を排除する Why • Iteration protocols に準拠し たものとして扱える お気持ち • 型チェック挟むより良い場 合がある
17. 不要なオプショナルアクセス演算子を削除したい • 運用が進んでいくとゴミが 残る可能性があります Why • 精神衛生の向上 お気持ち • no-unnecessary-condition
18. NaN で？ • NaN は number 型 • しっかりチェックしないと いけない • あと NaN マイルで undefined 会員は避けたい Why • 言語設計かな？ • なんでだろう お気持ち • NaN が number でこういう時 いいよねってあれば教えて ください
19. Utility Type を使おう • Utility Type を使うと既存の 型からいろいろできます。 お気持ち • (広義の) 定義が存在するの であれば独自定義をする必 要はない
20. null と undefined を同時に check • 等価演算子でいいよ Why • TypeScript Deep Dive で言っ てるから お気持ち • それ以外は厳密等価演算子 を使いましょう
21. 型宣言 • 推論できるなら推論したい Why • 根幹の型が変わった場合、 コードの修正点が増える お気持ち • ある程度の精度がでている 推論型のケースは型を明示 させない lint 教えて
22. Wrapper Library で型が提供されていない場合もあ きらめない • ときどきあります • 例: vue.draggable は SortableJS の Wrapper です。 MoveEvent 型とかが SortableJS のほうにしかない (ような気がする) Why • そういうときもある お気持ち • ライブラリを使ってるのに 型定義自分でするのはおか しいでしょという気持ち
23. HTML Input number の value の型 • string なんすわ。。 • undefined もあるぞ。。 Why • なんで？わかんない • <input type="number"> - HTML: HyperText Markup Language | MDN お気持ち • どうすればいいんですか？ • とりあえず型全部みます
24. Thank you!