ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained

Transcript

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

2. 2 自己紹介 • Web  エンジニア • Deno コントリビューター • ECMAScript  や  Web 標準 を追うのが好き petamoriken カスタマーオペレーション

   ＆セーフティ本部 オペレーション開発部

3. 3

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

5. 5 tsconfig.json の compilerOptions.lib で指定する • ECMAScript ◦ “ES2023” や “ESNext” • Web 標準 ◦ “DOM” や “DOM.Iterable”

   TypeScript の組み込み型定義

6. 6 tsconfig.json

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

8. 8 • ECMAScript ◦ 型の追加、修正は手作業 • Web 標準 ◦ 2つ以上のブラウザに実装された型が自動更新 ◦

   microsoft/TypeScript-DOM-lib-generator 組み込み型定義の実態

9. （余談）ES2024 の型を実装中 9

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

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

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

13. 13

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

15. 15

16. 16 TypeScript の組み込み型定義について • ECMAScript の型の追加、修正は手作業 • Web 標準の型は自動更新 ◦ Web IDL と Browser Compat

    Data を使っている まとめ