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

型情報を手繰り寄せる技術~TypeScript Compiler APIによる型解析実践~

Avatar for jiko21 jiko21
November 23, 2025
1.1k
0

型情報を手繰り寄せる技術~TypeScript Compiler APIによる型解析実践~

TSKaigi Hokurikuの資料です

Avatar for jiko21

jiko21

November 23, 2025

More Decks by jiko21

See All by jiko21
Creating a Next.js-style Framework with Bun and Hono
Avatar for jiko21 jiko21
0
180
Array Grouping will soon be arriving at TypeScript
Avatar for jiko21 jiko21
0
160
Copying Array Methods arrived at TypeScript
Avatar for jiko21 jiko21
1
770
SSRで動的に
OGP画像を生成したい！
〜Cloudflare Workersから@vercel/og移行編〜
Avatar for jiko21 jiko21
0
160
node:test will replace Jest?
Avatar for jiko21 jiko21
0
120
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
Avatar for jiko21 jiko21
2
430
NestJS a progressive web framework
Avatar for jiko21 jiko21
3
2.2k
レガシーなフロントエンドをリプレイスする
Avatar for jiko21 jiko21
5
1.6k
Deep Dive Into Vue Composition API
Avatar for jiko21 jiko21
0
3.3k

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
HDC tutorial
Avatar for Michiel Stock michielstock
1
610
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
150
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
140
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
160

Transcript

  1. 型情報を手繰り寄せる技術 ~TypeScript Compiler APIによる型解析実践~ TSKaigi Hokuriku 小島大基 (@jiko21) / エムスリー株式会社

  2. 自己紹介 • 名前: 小島大基(こじまだいき) / @jiko21 • 所属: エムスリー株式会社 •

    北陸の思い出 • 2年前、大阪から金沢までサンダーバードを使って観光旅行に行きました • 金箔入りソフトクリームがおすすめ

  3. 突然ですが…

  4. 型から何かを生成したくないですか？

  5. 型から生成できるとうれしいもの • APIのSchema • IF定義(open-api)からの生成はあるが実装からIFを作りたいetc • テスト用ダミーデータの生成 • いつも自前で実装しているが型からfaker等利用して生成できると楽 •

    その他いっぱい…

  6. ワイ「型からHTML生成したい！」

  7. 型からHTMLを生成したいモチベーション • HTMLのセマンティクスやルールに沿ったHTMLだけを書ける状態にしたい • NGパターン1 inline要素の中に block要素は置けない

  8. 型からHTMLを生成したいモチベーション • HTMLのセマンティクスやルールに沿ったHTMLだけを書ける状態にしたい • NGパターン2 ブロック要素があると pタグは閉じられる ブロック要素があると pタグは閉じられる

  9. こういうものを作りました！

  10. html-typeについて • TypeScriptの型からHTMLを生成するライブラリ

  11. html-typeについて • Pの中でDIVを利用するなど、HTMLのセマンティクスに違反する場合 型エラーとなる

  12. html-typeのやっていること • 型の提供 • 各HTMLのタグに対応する型を提供 • Html<T>, Body<T>, Div<T>, P<T>

    • TypeScript Compiler APIによる型解析

  13. html-typeのやっていること • 型の提供 • 各HTMLのタグに対応する型を提供 • Html<T>, Body<T>, Div<T>, P<T>

    • TypeScript Compiler APIによる型解析

  14. TypeScript Compiler API

  15. TypeScript Compiler APIって知ってます？ • TypeScriptを解析するためのAPI • 型情報やコメント等をAST(抽象構文木)で取得できたり、型生成したりできる • 実際に使われているプロダクト •

    ESLint • openapi-typescript • etc • TypeScript Goの登場でjsから直接触ることはできなくなる可能性があるので注意…

  16. • TypeScriptの型をASTに変換する TypeScript Compiler APIでできること

  17. html-typeのやっていること • 型の提供 • 各HTMLのタグに対応する型を提供 • Html<T>, Body<T>, Div<T>, P<T>

    • TypeScript Compiler APIによる型解析

  18. TypeScript Compiler APIを使っていく

  19. よくみるサンプルコード そもそもこれって何？

  20. よくみるサンプルコード

  21. ͍͢͝Ͱ͔͍ΦϒδΣΫτ͕දࣔ͞ΕΔʜ

  22. オブジェクトがよくわからな い…

  23. まずは外部ツールでASTを見てみる • TypeScript AST Viewer (https://ts-ast-viewer.com/) を使えばどうい うASTに変換されるかわかる • 実際に型を解析する前にこのサイトで解析したい型がどういうASTかを

    見てみるとよい

  24. まずは外部ツールでASTを見てみる

  25. ちなみに… • ts.Nodeにはkindというフィールドがあり、ここにASTの種類を表す 値(数字)がありますが300種類以上あります→ • あくまで実装時のデバッグに使う、くらいの気持ちで いるほうがいいかも

  26. ちなみに…

  27. それぞれのkindにあわせてparse • 先程のnode.kindを使って解析してみると…

  28. None

  29. Kindだけでは(型的に)絞り込めない • kindだけではASTの種別を型的に識別できない • (残念ながら)Disciminated Unionではない • TypeAliasDeclaration型の継承関係を見てみるとこんなに複雑 TypeAliasDeclaration DeclarationState

    LocalsContainer JSDocContainer NamedDeclaration Statement Declaration Node

  30. isXXXを使う • isXXXを使うとに単true/falseを返すだけでなく型ガードにより 推論してくれる • 今回だとisTypeAliasDeclaration

  31. isXXXを使う • isXXXを使うとに単true/falseを返すだけでなく型ガードにより 推論してくれる • 今回だとisTypeAliasDeclaration

  32. 実際にHTML型をparseしていく

  33. 軽くhtml-typeの型について • <html>、<body>、<div>、<p>について型として定義されている • HTMLとして子要素に持てるもの(HTMLNodeとする)は • 文字列(Text) • HTMLNode •

    HTMLNodeあるいはTextを含むリスト • 例えば<html>タグは右のように定義されている
  34. None

  35. • 以下のようなシンプルなASTをパースしていく まずはシンプルなケースでパースしていく

  36. • SourceFile自体がファイルのrootに位置するのでそこから深さ優先で 再帰処理していく 頭にあるSourceFileを識別 SourceFile

  37. • TypeAliasにヒットすると次は型の内部を見ていく TypeAliasを識別 TypeAlias

  38. • 内部構造見てみるとIdentifierとTypeReferenceを持つ TypeAliasを識別 TypeReference Identifier

  39. • node.type.typneNameがIdentifier TypeAliasを識別 TypeReference Identifier

  40. • getTypeAtLocation、typeToTypeNode を使ってちゃんとTypeReferenceを 解析していく TypeReferenceを解析していく

  41. むずかしい

  42. 前提知識 • よく出てくる登場人物はこれ • Type: 型システムが扱う型そのもの(ASTではない) • Node: AST Node全般

    • TypeNode: 型に関するNode(Nodeを継承している)

  43. 前提知識 • NodeからTypeの情報が欲しいとき • TypeからそのNodeの情報が欲しいとき

  44. • getTypeAtLocation、typeToTypeNode を使ってちゃんとTypeReferenceを 解析していく • typeToTypeNodeの第三引数が かなり大事！(一旦undefinedで) • TypeReferenceだと中の型情報が 取り出せない!

    TypeReferenceを解析していく

  45. • node.membersでそれぞれの構成要素を取得できる ひたすらTypeLiteralNodeを解析していく Identifier PropertySignature

  46. None

  47. ひたすらTypeLiteralNodeを解析していく • node.membersでそれぞれの構成要素を取得できる • Indentifier: 型名が取得できる • PropertySignature: 今回の場合は Genericsの部分

    Identifier PropertySignature

  48. PropertySignatureを解析する前に…

  49. 軽くhtml-typeの型について(再掲) • <html>、<body>、<div>、<p>について型として定義されている • HTMLとして子要素に持てるもの(HTMLNodeとする)は • 文字列(Text) • HTMLNode •

    HTMLNodeあるいはTextを含むリスト • 例えば<html>タグは右のように定義されている

  50. PropertySignatureをパース • PropertySignatureは3種類ありうる • 文字列リテラル: StringLiteral • タプル(配列): TupleTypeNode •

    Typeリテラル: TypeLiteralNode

  51. • PropertySignatureは3種類ありうる • 文字列リテラル: StringLiteral • タプル(配列): TupleTypeNode • Typeリテラル:

    TypeLiteralNode PropertySignatureをパース

  52. • 文字列リテラル: StringLiteral • そのまま文字列を取り出す PropertySignatureをパース StringLiteral

  53. • タプル(配列): TupleTypeNode • タプル内要素を再度解析する PropertySignatureをパース TupleTypeNode

  54. • Typeリテラル: TypeLiteralNode • 要素が1つだけなのでその要素を再度解析 PropertySignatureをパース TypeLiteralNode

  55. • PropertySignatureは3種類ありうる • 文字列リテラル: StringLiteral • そのまま文字列を取り出す • タプル(配列): TupleTypeNode

    • タプル内要素を再度解析する • Typeリテラル: TypeLiteralNode • 要素が1つだけなのでその要素を再度解析 PropertySignatureをパース StringLiteral TupleTypeNode TypeLiteralNode

  56. 実際のASTの構造

  57. 生成ができた

  58. より複雑なものをparseしてみる • もっと複雑なものをparseしてみると…

  59. • ここは本来、TypeLiteral>TypeLiteral>StringLiteralとはいるはず… 何が起こっているかを見てみる

  60. 何が起こっているかを見てみる

  61. • ここは本来、TypeLiteral>TypeLiteral>StringLiteralとはいるはず… 何が起こっているかを見てみる どうやら省略されてそう…

  62. 型解析は不可能

  63. と言う前に…

  64. Configでいじれるところを見る • 今までのコードの中で、何かしらConfigを 入れられそうなのは右の5つ

  65. None
  66. None
  67. None
  68. None
  69. None

  70. TypeToTypeNodeを見てみると… • 今までundefinedで誤魔化してましたが第三引数が大事 • NodeBuildingFlagsにいろいろなフラグがある

  71. None

  72. NodeBuildingFlagsを使う • 今回はTruncate(…)を防ぎたいのでNoTruncateを使う • シフト演算でそれぞれのフラグ定義されているので、 複数のフラグも指定可能！

  73. ちゃんとTruncationが治った！

  74. ここだけの話 • Truncateが出たときにClaude Codeに相談したところ、 すごい力技でTruncateした部分を解消しようとしてました… • ↑まだTypeScript CompilerのことはClaudeもわからない? 　あるいはそれくらい情報が少ない?

  75. まとめ • まずはAST ViewerでASTを見てみるべし • Compiler Optionは要注意 • TypeScript自体のコードを見るべし •

    GitHubじゃなくて手元にClone!(GitHubだと多分みれない…)

  76. 良い型ライフを！