Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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 を使っている まとめ