Slide 1

Slide 1 text

初めてDefinitelyTypedにPRを出した話 2024-11-16 TSKaigi Kansai 2024 株式会社ベースマキナ syumai

Slide 2

Slide 2 text

● ECMAScript 仕様輪読会 主催 ● Xコミュニティ「浅草界隈プログラマー」をやってます ● 株式会社ベースマキナで管理画面のSaaSを開発中 ○ GoでGraphQLサーバー (gqlgen) や TypeScriptでフロント エンドを書いています ● Software Design 2023年 12月号からCloudflare Workersの連 載をしてます ● 𝕏: @__syumai ● Website: https://syum.ai ⾃⼰紹介 syumai

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

初めてDefinitelyTypedにPRを出した話

Slide 5

Slide 5 text

PRを出すことになった経緯 DefinitelyTypedに初めてPRを出した話 ● encoding-japaneseというライブラリにパッチを送る必要があった ● ライブラリ本体の修正に成功したが、いざ使ってみたら型エラーが発⽣ ● 型エラーを無視したくないので、DefinitelyTypedにPRを出す道へ…

Slide 6

Slide 6 text

DefinitelyTyped

Slide 7

Slide 7 text

DefinitelyTypedとは ● https://github.com/DefinitelyTyped/DefinitelyTyped ● あらゆるJavaScript製ライブラリに対するTypeScriptの型定義を配布 ● TypeScript黎明期を⽀えた偉⼤なプロジェクト ● `@types/${npm package名}` という名前で型定義を配布している ○ ほとんどの⼈が使ったことのあるやつ: @types/node, @types/react, etc… DefinitelyTypedとは

Slide 8

Slide 8 text

DefinitelyTypedの課題 ● 型定義のメンテナンスがライブラリ本体から独⽴している ○ → ライブラリ⾃体の更新に型定義の更新が追いつかないことが発⽣ ● メンテナがライブラリ本体と分かれている場合がある ○ そもそも、第三者が型定義を追加することで成⻑してきたプロジェクト DefinitelyTypedとは 課題理解におすすめの記事↓

Slide 9

Slide 9 text

2024年現在、⼀般的な型定義の配布⽅法 ● ライブラリ本体に抱き合わせ ○ いまや、当たり前のようにライブラリ本体がTSで書かれている ○ ライブラリがTSで書かれていなくても、⼿書きd.tsを抱き合わせて配 布する⽅が楽 ● 直近DefinitelyTypedに触れる場⾯は、新しいpackageの導⼊時と⾔うより 古くから使われているライブラリの型定義が必要な時 DefinitelyTypedとは

Slide 10

Slide 10 text

DefinitelyTypedのプロジェクト構成 ● 2024年11⽉現在、8953プロジェクトを保有する超巨⼤なpnpm workspace ○ `./types` ディレクトリ配下に各プロジェクトを設置 ● 基本的なファイル: ○ package.json, tsconfig.json ● 追加の設定ファイル: ○ .eslintrc.json, .npmignore ● テストコード: ○ ${npm package名}-tests.ts DefinitelyTypedとは encoding-japaneseの例

Slide 11

Slide 11 text

2023年10⽉(わりと最近!)にガッとpnpm workspace移⾏された

Slide 12

Slide 12 text

DefinitelyTypedのバージョニング ● 各packageのpackage.jsonに記載 ● 常にpatchバージョンとして .9999 を指定する ○ patchバージョン部分がリリース時に⾃動で0から順にインクリメント される ○ 例: 2.2.9999 -> 2.2.0 (2.2系の初回リリース時) ● major, minorバージョンはライブラリ本体と合わせる必要がある ○ → DefinitelyTypedから配布される型定義のpatchバージョンはライブ ラリ本体と同期していない DefinitelyTypedとは

Slide 13

Slide 13 text

DefinitelyTypedにPRを出す流れ

Slide 14

Slide 14 text

PRを出す⼤まかな⼿順 1. リポジトリのclone、dependenciesのインストール 2. 型定義の修正 3. テストコードの修正 4. コードのフォーマット 5. (必要があれば) バージョンの更新 6. PRをOpen 詳しい⼿順はREADMEのHow can I contribute?に記載 DefinitelyTypedにPRを出す流れ

Slide 15

Slide 15 text

1. リポジトリのclone、dependenciesのインストール ● github.com/DefinitelyTyped/DefinitelyTyped をclone ● 無邪気にpnpm installすると、8900個以上あるWorkspaceのpnpm install が⼀⻫に⾛って⼤変 ○ `pnpm install -w --filter "...{./types/npm package名}...` で フィルタする DefinitelyTypedにPRを出す流れ

Slide 16

Slide 16 text

2. 型定義の修正 ● ⼿書きd.tsを直す ● ⾃分が対応したのはfallbackオプションの修正。 ○ ⾃分が追加した "ignore" と、別のPRで追加されていた "error" の追加 DefinitelyTypedにPRを出す流れ

Slide 17

Slide 17 text

3. テストコードの修正 ● 型チェックのみを⾏うためのテストが各packageに存在する ● 今回は、 fallback プロパティに "ignore" と、"error" を追加しても型 エラーにならないことを検証 DefinitelyTypedにPRを出す流れ "ignore" のテストの抜粋 →

Slide 18

Slide 18 text

4. コードのフォーマット ● dprintを使う ● `pnpm dprint fmt -- 'types/${npm package名}/**/*.ts'`で 簡単実⾏ DefinitelyTypedにPRを出す流れ

Slide 19

Slide 19 text

5. (必要があれば) バージョンの更新 ● major / minorバージョンはライブラリ本体と合わせる必要あり ● encoding-japaneseが 2.2.0 に上がっていたので 2.0.9999 から 2.2.9999 に変更 DefinitelyTypedにPRを出す流れ

Slide 20

Slide 20 text

6. PRをOpen ● CODEOWNERにレビューの通知が⾶ぶ ○ 今回は、encoding-japaneseのDefinitelyTyped側CODEOWNERの ドッグさん (@rhysd) が⾮常に迅速にレビューしてくださった ○ PRを出したその⽇のうちにマージ&リリースまで進められました! DefinitelyTypedにPRを出す流れ

Slide 21

Slide 21 text

PRを出してみた感想

Slide 22

Slide 22 text

PRを出してみた感想 ● 出す前は、巨⼤プロジェクトすぎて⼤変そうだと思っていた ● 実際やると意外と楽 ○ 恐らくpnpm workspace化の効果で前より楽になっている(以前の状 態は触ったことがないので知らない) ● コントリビューションガイドが充実していて、かなりレールが整っている ● ⻑期に渡ってメンテナンスされ続けている⼤規模プロジェクトは凄い 最後に

Slide 23

Slide 23 text

ご清聴ありがとうございました!