入門 ESlint Typegen #TSKaigi #TSKaigi2025_kataritai

2025年6月6日(金)、「TSKaigi 2025事後勉強会 —— まだまだ型りたい」で登壇した開催された、弁護士ドットコム株式会社 クラウドサイン事業本部　フロントエンドエンジニア のツノが登壇した際の資料です。

セッションタイトル：入門 ESlint Typegen

■ 弁護士ドットコム株式会社プロダクト組織について
https://speakerdeck.com/bengo4com/introduction-for-creators

■ 採用情報はこちら
https://hrmos.co/pages/bengo4/jobs

■ テックブログ：弁護士ドットコム Creators’ blog
https://creators.bengo4.com/

■ X(Twitter)：弁護士ドットコム CREATOR'S
https://x.com/bengo4_creators

Transcript

1. Bengo4.com, Inc. 入門 ESlint Typegen 2025.06.06 クラウドサイン事業本部 ツノ
2. Bengo4.com, Inc. 2 自己紹介 ツノ Tsuno フロントエンドエンジニア 弁護士ドットコム株式会社 クラウドサイン ＜ X（Twitter）アカウント ＞ @2nofa11
3. Bengo4.com, Inc. 3 LTの概要 初日の招待公演
4. Bengo4.com, Inc. 4 LTの概要 紹介ツール ESlint Typegen
5. Bengo4.com, Inc. 5 LTの概要 その仕組みについて
6. Bengo4.com, Inc. 6 LTの概要 その仕組みについて
7. Bengo4.com, Inc. 7 LTの概要
8. Bengo4.com, Inc. 8 LTの概要 ESlint Typegen の仕組みを 「完全に理解」する このLTの ⽬的 ※ ダニング＝クルーガー効果の ”馬鹿の山” 部分をさしています。 ※
9. Bengo4.com, Inc. 9 そもそも ESlint Typegen とは
10. Bengo4.com, Inc. 10 ESLintのルールから型定義を自動作成 ESlint Typegen とは 前提 https://talks.antfu.me/2025/tskaigi/15?clicks=1
11. Bengo4.com, Inc. 11 ESLintのルールから型定義を自動作成 前提 https://talks.antfu.me/2025/tskaigi/15?clicks=1 ESlint Typegen とは
12. Bengo4.com, Inc. typegen関数の引数に configを渡して、 ESLint を実行する 利用者 12 typegen(configs) 利用方法
13. Bengo4.com, Inc. 13 LTの概要 今回のLTのスコープ
14. Bengo4.com, Inc. 14 LTの概要 今回のLTのスコープ
15. typegen(configs) 15 step1
16. Bengo4.com, Inc. ESLintのコアルール + 自分で設定したルールを取得 16 typegen(configs)
17. Get ESLint plugins from configs 17 step2
18. Bengo4.com, Inc. 有効な plugin と coreルール を抽出 ポイント 18 Get ESLint plugins from configs
19. Bengo4.com, Inc. 有効な plugin と coreルール を抽出 19 Get ESLint plugins from configs
20. 20 step3 Get JSON Schema from each rule
21. Bengo4.com, Inc. plugins → rules 変換後、rules から schemaを取得 21 Get JSON Schema from each rule
22. Bengo4.com, Inc. plugins → rules 変換後、rules から schemaを取得 22 Get JSON Schema from each rule
23. json-schema-to-typescript 23 step4
24. Bengo4.com, Inc. json-schema-to-typescript を使ってTypeScriptに変換 24 json-schema-to-typescript
25. Bengo4.com, Inc. 25 json-schema-to-typescript json-schema-to-typescript を使ってTypeScriptに変換
26. Write typgen.d.ts 26 step5
27. Bengo4.com, Inc. 抽出した ruleの型情報から eslint-typegen.d.ts を生成 27 Write typgen.d.ts
28. Augment to ESLint Type 28 step6
29. Bengo4.com, Inc. ESLintの型定義を拡張する 29 Augment to ESLint Type
30. Bengo4.com, Inc. 30 Triple-Slash Directivesを利用して、型情報を読み込んでいる Configから読み込み 最後に https://talks.antfu.me/2025/tskaigi/15?clicks=1
31. Bengo4.com, Inc. 31 Triple-Slash Directivesを利用して、型情報を読み込んでいる Configから読み込み 最後に https://talks.antfu.me/2025/tskaigi/15?clicks=1
32. Bengo4.com, Inc. 32 まとめ なるほど！？！？！？
33. Bengo4.com, Inc. 33 SpecialThanks Anthony Fu Creator of VueUse , ESlint Typegen
34. Bengo4.com, Inc. ありがとうございました
35. Bengo4.com, Inc. 35 • The New Powerful ESLint Config with Type Safety • eslint-typegen リファレンス