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

fukuoka.ts #1（オンライン）
https://fukuoka-ts.connpass.com/event/320038/

Transcript

1. ECMAScript、Web 標準の型は どう管理されているか fukuoka.ts #1 pixiv Inc. 森内建太 petamoriken 2024.8.30
2. 2 自己紹介 • Web  エンジニア • Deno コントリビューター • ECMAScript  や  Web 標準 を追うのが好き petamoriken カスタマーオペレーション ＆セーフティ本部 オペレーション開発部
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 の仕組み
14. 14 最後にパッチを当てて型ファイルを生成 • イベント名のマッピング（文字列リテラル型対応） • ジェネリクス対応 などなど TypeScript-DOM-lib-generator の仕組み
16. 16 TypeScript の組み込み型定義について • ECMAScript の型の追加、修正は手作業 • Web 標準の型は自動更新 ◦ Web IDL と Browser Compat Data を使っている まとめ