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
590
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.5k
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
570
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
260
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
2.4k
DOM Observable
petamoriken
1
280
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
720
Contributing to Deno is fun!
petamoriken
0
400
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
7.1k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.4k
Other Decks in Programming
See All in Programming
オンデバイスAIとXcode
ryodeveloper
0
250
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
820
EMこそClaude Codeでコード調査しよう
shibayu36
0
460
Devoxx BE - Local Development in the AI Era
kdubois
0
150
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.2k
CSC305 Lecture 10
javiergs
PRO
0
290
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
130
Webサーバーサイド言語としてのRustについて
kouyuume
1
5k
ALL CODE BASE ARE BELONG TO STUDY
uzulla
28
6.8k
NIKKEI Tech Talk#38
cipepser
0
290
AkarengaLT vol.38
hashimoto_kei
1
130
Leading Effective Engineering Teams in the AI Era
addyosmani
7
650
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
What's in a price? How to price your products and services
michaelherold
246
12k
Faster Mobile Websites
deanohume
310
31k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.9k
Thoughts on Productivity
jonyablonski
71
4.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
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 を使っている まとめ