Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript ...
Search
petamoriken / 森建
August 30, 2024
Programming
3
480
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
fukuoka.ts #1(オンライン)
https://fukuoka-ts.connpass.com/event/320038/
petamoriken / 森建
August 30, 2024
Tweet
Share
More Decks by petamoriken / 森建
See All by petamoriken / 森建
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
410
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
180
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
1.5k
DOM Observable
petamoriken
1
210
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
590
Contributing to Deno is fun!
petamoriken
0
310
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.5k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.2k
ESNext の議論に参加しよう / Join the ESNext discussion
petamoriken
3
820
Other Decks in Programming
See All in Programming
Внедряем бюджетирование, или Как сделать хорошо?
lamodatech
0
860
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
260
CQRS+ES の力を使って効果を感じる / Feel the effects of using the power of CQRS+ES
seike460
PRO
0
230
テストケースの名前はどうつけるべきか?
orgachem
PRO
1
180
PSR-15 はあなたのための ものではない? - phpcon2024
myamagishi
0
360
fs2-io を試してたらバグを見つけて直した話
chencmd
0
280
MCP with Cloudflare Workers
yusukebe
2
270
iOS開発におけるCopilot For XcodeとCode Completion / copilot for xcode
fuyan777
1
1.2k
Package Traits
ikesyo
1
130
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
710
歴史と現在から考えるスケーラブルなソフトウェア開発のプラクティス
i10416
0
240
Beyond ORM
77web
11
1.5k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
How STYLIGHT went responsive
nonsquared
96
5.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
112
50k
GraphQLとの向き合い方2022年版
quramy
44
13k
The Cost Of JavaScript in 2023
addyosmani
46
7.1k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.7k
jQuery: Nuts, Bolts and Bling
dougneiner
62
7.6k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Transcript
ECMAScript、Web 標準の型は どう管理されているか fukuoka.ts #1 pixiv Inc. 森内建太 petamoriken 2024.8.30
2 自己紹介 • Web エンジニア • Deno コントリビューター • ECMAScript や Web 標準 を追うのが好き petamoriken カスタマーオペレーション
&セーフティ本部 オペレーション開発部
3
4 © ンバヂ https://x.com/nbaji9 https://www.nicovideo.jp/watch/sm42515407
5 tsconfig.json の compilerOptions.lib で指定する • ECMAScript ◦ “ES2023” や “ESNext” • Web 標準 ◦ “DOM” や “DOM.Iterable”
TypeScript の組み込み型定義
6 tsconfig.json
7 microsoft/TypeScript の src/lib 内にある 組み込み型定義の実態
8 • ECMAScript ◦ 型の追加、修正は手作業 • Web 標準 ◦ 2つ以上のブラウザに実装された型が自動更新 ◦
microsoft/TypeScript-DOM-lib-generator 組み込み型定義の実態
(余談)ES2024 の型を実装中 9
10 Mozilla の saschanaz さんによる管理 2つ以上のブラウザで実装された型が自動更新 • TypeScript へはバージョンアップ時に取り込まれる • 最新の型を使いたい場合は @types/web へ TypeScript-DOM-lib-generator
11 w3c/webref から最新の Web IDL を JSON で取得 TypeScript-DOM-lib-generator の仕組み
12 Browser Compat Data と突合する • ブラウザの実装状況や廃止された API かを調べる TypeScript-DOM-lib-generator の仕組み
13
14 最後にパッチを当てて型ファイルを生成 • イベント名のマッピング(文字列リテラル型対応) • ジェネリクス対応 などなど TypeScript-DOM-lib-generator の仕組み
15
16 TypeScript の組み込み型定義について • ECMAScript の型の追加、修正は手作業 • Web 標準の型は自動更新 ◦ Web IDL と Browser Compat
Data を使っている まとめ