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
390
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 / 森建
DOM Observable
petamoriken
1
140
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
490
Contributing to Deno is fun!
petamoriken
0
250
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.2k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.1k
ESNext の議論に参加しよう / Join the ESNext discussion
petamoriken
3
760
Multithreading WebAssembly by Rust
petamoriken
3
1k
WebAssembly で WebP のデコードを試した / Decode WebP with WebAssembly by pure Rust
petamoriken
0
1.1k
TC39 で提案されている ECMAScript 最新仕様 / ECMAScript latest specification proposed in TC39
petamoriken
2
850
Other Decks in Programming
See All in Programming
Kotlin 2.0 and Beyond
antonarhipov
2
140
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
260
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
180
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
960
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.6k
LR で JSON パーサーを作る / Coding LR JSON Parser
junk0612
2
180
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
190
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
200
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
390
The Future of Frontend i18n : Intl.MessageFormat
sajikix
1
2.5k
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
240
1人で挑むSwiftコンパイラ 〜型システム入門編〜
s_shimotori
0
330
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Testing 201, or: Great Expectations
jmmastey
36
7k
GitHub's CSS Performance
jonrohan
1029
450k
Building Your Own Lightsaber
phodgson
101
6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
35
6.8k
Raft: Consensus for Rubyists
vanstee
135
6.5k
Being A Developer After 40
akosma
83
580k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
326
21k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
The Language of Interfaces
destraynor
153
23k
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 を使っている まとめ