https://ozaki25.hatenadiary.jp/entry/2024/11/16/195131

TypeScriptの型システムは万能機械の夢を見るか？

モノレポで多くのモジュールが入り組んでいる
tscに数十秒かかっていて半分くらいになった
Redux Toolkitの型推論が効果絶大
- reducerの引数のstateがinitialStateから推論されてて重かった
- 型定義を直接書かずにtypeで定義することでキャッシュがきいてはやくなった
ExtractによるInstantiation
- Extractのチェックに時間がかかっていた
- Extractやめて関数オーバーロードすることではやくなった
- ただしコード量は増えてしまっている
不要なスキーマチェック削除
- 不要なzodのスキーマがあって消したらはやくなった
- ビルド済みのjsがtscの対象に含まれてしまっていた
VSCode上での課題
- tscならキャッシュがきくけどVSCode上だと毎回走る
調査
- tscの結果のtraceを取得
  - --noEmit --extendedDiagnotics --generateTrace
  - trace.json
  - types.json
- 解析ツールで見る
  - about:tracing
  - Perfetto UI
  - speedscope
- 遅いファイルを特定してAST Explorerで確認

APIを型安全にするために
- コードファーストなものそうでないもの
- コードファーストじゃないと実装と使用が乖離してしまうなど管理が大変
- コードファーストなら型の恩恵が大きい
TSならではの手法
- 型定義の共有
  - ライブラリなしでできる
  - fetchの中では型きかない
- zodのスキーマ共有
  - モデルの定義に基づいたバリデーションできる
  - バリデーションを共有できる
- いずれもモノレポであること前提
言語に依存しない方法
- OpenAPI
  - 仕様が標準化されている
  - エコシステムが充実
  - 部分的な採用もできる
- gRPCやGraphQLもある
OpenAPI
- サーバーコードからOpenAPIを生成
  - Hono
    - @hono/zpd-openapi
  - NestJS
  - FastAPI
  - 実装を変更しないとOpenAPIを変更できない
- OpenAPIからAPIクライアントを生成
  - openapi-fetch/openapi-typescript
  - orval
    - axiosベースのコードを生成
    - 他いろいろなライブラリ連携
- OpenAPIからサーバーコードを生成
  - TSではまだ枯れてない
- OpenAPIを何で書くか
  - yaml
  - TypeSpec
    - TypeScript/C#風に書ける
    - 不備はコンパイルで落ちてくれる

実際のユーザの操作にあわせてAPIをたたいていくテスト
- グラフ状に分岐は増えてパターンが多い
- これを管理するツールを作った
ノーコードツールは状態管理が大変
- Reactで作るけどReactに依存しないところで管理したい
- JotaiのAtomを通じて外部のstateの変化に応じて更新処理を動かす
Effect
- successとerrorとrequirementsを型に持つ
- 割り算の関数だとsuccessがnumberでerrorがError
- requirementsは処理を動かすための依存

JSオブジェクトを文字列化するとき
- 丸ごと文字列化すると意図しないプロパティが入ってるとそれまで文字列化されてしまう
- TSの型は余計なプロパティが入っててもエラーにならない
検索系のURLが歴史的経緯で種類が多い
- 過去のSEO対策で
- 一度出すとどこから流入来るかわからないから簡単に消せない
- URLのパターンごとに複数の検索条件クエリの型がある
  - 過去のページから現在のページに検索クエリも変換しないといけない
  - 省略可能なフィールドが多い
  - prefetchしたりもしてる
起きたこと
- 旧クエリを新クエリに変換するのを忘れてprefetch投げた
- オプショナル多いから型エラーがでなかった
- 旧クエリに特定のフィールドがあるときに問題が起きた
解決策
- 余計なフィールドが入らないようにする
  - フィールドを1つずつセットしてから使う
  - zod使ってマッピングする
  - valibotでも
- そもそも型エラーになるようにする
  - 構造的部分型/公称型
    - TSは前者で後者はJavaとか
  - 構造的部分型
    - 型が同じ構造を持っていたら互換性を持つ
  - 公称型
    - 同じ構造でもクラスが同じでないとダメ
  - TSで公称型を使えればいい
    - private fieldを持つclassを使う
    - brand hackする