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
570
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 / 森建
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.4k
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
550
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
250
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
2.2k
DOM Observable
petamoriken
1
270
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
700
Contributing to Deno is fun!
petamoriken
0
380
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.9k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.4k
Other Decks in Programming
See All in Programming
Honoアップデート 2025年夏
yusukebe
1
840
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
120
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
990
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
770
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
570
🔨 小さなビルドシステムを作る
momeemt
1
490
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
110
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
パスタの技術
yusukebe
1
400
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
200
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
490
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Rails Girls Zürich Keynote
gr2m
95
14k
We Have a Design System, Now What?
morganepeng
53
7.7k
Facilitating Awesome Meetings
lara
55
6.5k
How GitHub (no longer) Works
holman
315
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Docker and Python
trallard
45
3.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Designing for humans not robots
tammielis
253
25k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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 を使っている まとめ