入門 ESlint Typegen #TSKaigi #TSKaigi2025_kataritai

by 弁護士ドットコム

Slide 1

Slide 1 text

Bengo4.com, Inc. 入門 ESlint Typegen 2025.06.06 クラウドサイン事業本部ツノ

Slide 2

Slide 2 text

Bengo4.com, Inc. 2 自己紹介ツノ Tsuno フロントエンドエンジニア弁護士ドットコム株式会社クラウドサイン＜ X（Twitter）アカウント＞ @2nofa11

Slide 3

Slide 3 text

Bengo4.com, Inc. 3 LTの概要初日の招待公演

Slide 4

Slide 4 text

Bengo4.com, Inc. 4 LTの概要紹介ツール ESlint Typegen

Slide 5

Slide 5 text

Bengo4.com, Inc. 5 LTの概要その仕組みについて

Slide 6

Slide 6 text

Bengo4.com, Inc. 6 LTの概要その仕組みについて

Slide 7

Slide 7 text

Bengo4.com, Inc. 7 LTの概要

Slide 8

Slide 8 text

Bengo4.com, Inc. 8 LTの概要 ESlint Typegen の仕組みを「完全に理解」するこのLTの⽬的 ※ ダニング＝クルーガー効果の ”馬鹿の山” 部分をさしています。 ※

Slide 9

Slide 9 text

Bengo4.com, Inc. 9 そもそも ESlint Typegen とは

Slide 10

Slide 10 text

Bengo4.com, Inc. 10 ESLintのルールから型定義を自動作成 ESlint Typegen とは前提 https://talks.antfu.me/2025/tskaigi/15?clicks=1

Slide 11

Slide 11 text

Bengo4.com, Inc. 11 ESLintのルールから型定義を自動作成前提 https://talks.antfu.me/2025/tskaigi/15?clicks=1 ESlint Typegen とは

Slide 12

Slide 12 text

Bengo4.com, Inc. typegen関数の引数に conﬁgを渡して、 ESLint を実行する利用者 12 typegen(conﬁgs) 利用方法

Slide 13

Slide 13 text

Bengo4.com, Inc. 13 LTの概要今回のLTのスコープ

Slide 14

Slide 14 text

Bengo4.com, Inc. 14 LTの概要今回のLTのスコープ

Slide 15

Slide 15 text

typegen(conﬁgs) 15 step1

Slide 16

Slide 16 text

Bengo4.com, Inc. ESLintのコアルール + 自分で設定したルールを取得 16 typegen(conﬁgs)

Slide 17

Slide 17 text

Get ESLint plugins from conﬁgs 17 step2

Slide 18

Slide 18 text

Bengo4.com, Inc. 有効な plugin と coreルールを抽出ポイント 18 Get ESLint plugins from conﬁgs

Slide 19

Slide 19 text

Bengo4.com, Inc. 有効な plugin と coreルールを抽出 19 Get ESLint plugins from conﬁgs

Slide 20

Slide 20 text

20 step3 Get JSON Schema from each rule

Slide 21

Slide 21 text

Bengo4.com, Inc. plugins → rules 変換後、rules から schemaを取得 21 Get JSON Schema from each rule

Slide 22

Slide 22 text

Bengo4.com, Inc. plugins → rules 変換後、rules から schemaを取得 22 Get JSON Schema from each rule

Slide 23

Slide 23 text

json-schema-to-typescript 23 step4

Slide 24

Slide 24 text

Bengo4.com, Inc. json-schema-to-typescript を使ってTypeScriptに変換 24 json-schema-to-typescript

Slide 25

Slide 25 text

Bengo4.com, Inc. 25 json-schema-to-typescript json-schema-to-typescript を使ってTypeScriptに変換

Slide 26

Slide 26 text

Write typgen.d.ts 26 step5

Slide 27

Slide 27 text

Bengo4.com, Inc. 抽出した ruleの型情報から eslint-typegen.d.ts を生成 27 Write typgen.d.ts

Slide 28

Slide 28 text

Augment to ESLint Type 28 step6

Slide 29

Slide 29 text

Bengo4.com, Inc. ESLintの型定義を拡張する 29 Augment to ESLint Type

Slide 30

Slide 30 text

Bengo4.com, Inc. 30 Triple-Slash Directivesを利用して、型情報を読み込んでいる Conﬁgから読み込み最後に https://talks.antfu.me/2025/tskaigi/15?clicks=1

Slide 31

Slide 31 text

Bengo4.com, Inc. 31 Triple-Slash Directivesを利用して、型情報を読み込んでいる Conﬁgから読み込み最後に https://talks.antfu.me/2025/tskaigi/15?clicks=1

Slide 32

Slide 32 text

Bengo4.com, Inc. 32 まとめなるほど！？！？！？

Slide 33

Slide 33 text

Bengo4.com, Inc. 33 SpecialThanks Anthony Fu Creator of VueUse , ESlint Typegen

Slide 34

Slide 34 text

Bengo4.com, Inc. ありがとうございました

Slide 35

Slide 35 text

Bengo4.com, Inc. 35 ● The New Powerful ESLint Conﬁg with Type Safety ● eslint-typegen リファレンス