Slide 1

Slide 1 text

ECMAScript、Web 標準の型は どう管理されているか fukuoka.ts #1 pixiv Inc. 森内建太 petamoriken 2024.8.30

Slide 2

Slide 2 text

2 自己紹介 ● Web  エンジニア ● Deno コントリビューター ● ECMAScript  や  Web 標準 を追うのが好き petamoriken カスタマーオペレーション &セーフティ本部 オペレーション開発部

Slide 3

Slide 3 text

3

Slide 4

Slide 4 text

4 © ンバヂ https://x.com/nbaji9 https://www.nicovideo.jp/watch/sm42515407

Slide 5

Slide 5 text

5 tsconfig.json の compilerOptions.lib で指定する ● ECMAScript ○ “ES2023” や “ESNext” ● Web 標準 ○ “DOM” や “DOM.Iterable” TypeScript の組み込み型定義

Slide 6

Slide 6 text

6 tsconfig.json

Slide 7

Slide 7 text

7 microsoft/TypeScript の src/lib 内にある 組み込み型定義の実態

Slide 8

Slide 8 text

8 ● ECMAScript ○ 型の追加、修正は手作業 ● Web 標準 ○ 2つ以上のブラウザに実装された型が自動更新 ○ microsoft/TypeScript-DOM-lib-generator 組み込み型定義の実態

Slide 9

Slide 9 text

(余談)ES2024 の型を実装中 9

Slide 10

Slide 10 text

10 Mozilla の saschanaz さんによる管理 2つ以上のブラウザで実装された型が自動更新 ● TypeScript へはバージョンアップ時に取り込まれる ● 最新の型を使いたい場合は @types/web へ TypeScript-DOM-lib-generator

Slide 11

Slide 11 text

11 w3c/webref から最新の Web IDL を JSON で取得 TypeScript-DOM-lib-generator の仕組み

Slide 12

Slide 12 text

12 Browser Compat Data と突合する ● ブラウザの実装状況や廃止された API かを調べる TypeScript-DOM-lib-generator の仕組み

Slide 13

Slide 13 text

13

Slide 14

Slide 14 text

14 最後にパッチを当てて型ファイルを生成 ● イベント名のマッピング(文字列リテラル型対応) ● ジェネリクス対応 などなど TypeScript-DOM-lib-generator の仕組み

Slide 15

Slide 15 text

15

Slide 16

Slide 16 text

16 TypeScript の組み込み型定義について ● ECMAScript の型の追加、修正は手作業 ● Web 標準の型は自動更新 ○ Web IDL と Browser Compat Data を使っている まとめ