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

TypeScript の型とお作法

TypeScript の型とお作法

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

Hayato Watanabe

May 12, 2024
Tweet

More Decks by Hayato Watanabe

Other Decks in Technology

Transcript

  1. はじめに • TypeScript はスーパーセットということを覚えておこう • コンパイラはだませる • 過去 1 年間で

    350 件ほど PR レビューを実施した者の話です • コードは必ずしもコピペで問題なく動くもモノではないです • 今日の話は僕の考える最強の~系なので参考程度にどうぞ • まさかり待ってます
  2. 本日のお品書き • 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 で型が提供されていない 場合もあきらめない
  3. object を typeof 演算子で評価するのは気を付けて • 配列や null も object Why

    • typeof - JavaScript | MDN 私のお気持ち • どちらかを使いましょう • type predicates • Zod
  4. Array.filter に気を付ける • 型推論されません Why • コンパイラおバカ • Infer type

    predicates from function bodies using control flow analysis お気持ち • TypeScript はスーパーセット だね
  5. any 撲滅委員会 • any は型という概念を消す Why • 型がみえないよ~ • TypeScript

    使っている意味を 考えたい お気持ち • no-explicit-any • unknown を使う
  6. Truthy, Falsy の評価に気を付けよう • Truthly, Falsy な値を評価をす ると。。 Why •

    言語的にそうなんすね。 きっと お気持ち • strict-boolean-expressions
  7. Array.map forEach を使い分ける • Array.map: 元の配列を変換し、 変換後の新しい配列を返す • Array.forEach: 各要素に対し

    て順番に関数を実行し、そ の関数による副作用をもた らす。 Why • 言語が提供している機能の 目的に沿って記述したい お気持ち • 可読性を意識すると選択す べきメソッドがわかるはず
  8. as unknown as で上書き • どうしても型があわないと きで動作が担保できるケー スはあり! Why •

    コンパイラはだませる! お気持ち • ランタイムと合わせるなら ありだと思う
  9. NaN で? • NaN は number 型 • しっかりチェックしないと いけない

    • あと NaN マイルで undefined 会員は避けたい Why • 言語設計かな? • なんでだろう お気持ち • NaN が number でこういう時 いいよねってあれば教えて ください
  10. Utility Type を使おう • Utility Type を使うと既存の 型からいろいろできます。 お気持ち •

    (広義の) 定義が存在するの であれば独自定義をする必 要はない
  11. null と undefined を同時に check • 等価演算子でいいよ Why • TypeScript

    Deep Dive で言っ てるから お気持ち • それ以外は厳密等価演算子 を使いましょう
  12. Wrapper Library で型が提供されていない場合もあ きらめない • ときどきあります • 例: vue.draggable は

    SortableJS の Wrapper です。 MoveEvent 型とかが SortableJS のほうにしかない (ような気がする) Why • そういうときもある お気持ち • ライブラリを使ってるのに 型定義自分でするのはおか しいでしょという気持ち
  13. HTML Input number の value の型 • string なんすわ。。 •

    undefined もあるぞ。。 Why • なんで?わかんない • <input type="number"> - HTML: HyperText Markup Language | MDN お気持ち • どうすればいいんですか? • とりあえず型全部みます