yarn add -D @types/spotify-web-playback-sdkWebフロントエンドの開発者であればよく目にすることのあるスニペットだと思います。
このコマンドを実行すると、DefinitelyTypedから該当するパッケージの型定義を引っ張ってきて、元々型定義の存在しないJavaScriptライブラリーであってもTypeScriptで扱えるようになる、そんな便利な仕組みです。
最近MixJuiceというプロジェクトを個人開発しており、その中でSpotify Web Playback SDKというライブラリーを使用しているのですが、これはNPMパッケージとして配布されているというわけではなく、2010年代までの常套手段だった、CDNで配布されているjsファイルをロードするような使い方をするのでそのままではTypeScriptのプロジェクトでは扱いにくかったんですよね。
幸い、有志がDefinitelyTypedにSpotify Web Playback SDKの型定義(@types/spotify-web-playback-sdk)を既に作成していたのでそれを使えば済む話ではあるのですが、Spotify Web Playback SDKが途中でアップデートされたせいか最新の型定義が反映されていない箇所を見つけました。
結構簡単に修正できそうだったのと、OSSのプロジェクトにコントリビュートしたことがなかったので経験的にも良さそうだと思い、実際に修正し、プルリクを立ててみることにしました。
今回の修正箇所
Spotifyの公式ドキュメントには、Spotify.Playerクラスのコンストラクターの引数に渡すオブジェクトにenableMediaSessionというプロパティーが存在しますが…
DefinitelyTypedの方には存在しません😇 (GitHubはこちら)
今回はこのenableMediaSessionプロパティーを型定義に含める修正をしていきます！
基本的には、DefinitelyTypedの公式ドキュメントの流れに沿って作業を進めていきます。
既存のプロジェクトにて修正を検証する
まずは、既に@types/spotify-web-playback-sdkが導入されているプロジェクトにて、型定義ファイルを直接編集してみて、問題がないかどうかを検証します。
MixJuiceで検証してみます。
まだ型定義を修正していないので、コンストラクターの引数にenableMediaSessionを含めるとTypeScriptエラーが発生します。
プロジェクトフォルダーのnode_modules/@types/spotify-web-playback-sdk/index.d.tsを直接編集して、enableMediaSessionの型定義をします。公式ドキュメントを見る限りではOptionalなboolean型と定義しておけば良さそうです。
型定義をしたことによってTypeScriptエラーが発生しなくなりました！
修正箇所としてはこれで良さそうなので、いよいよ実際にDefinitelyTypedのリポジトリーに手を加えていきます。
実際に修正作業をしていく
まずはDefinitelyTypedのGitHubリポジトリーをフォークして、git cloneし、新しいブランチを切ってnpm installします。ブランチ名のルールは特に無さそうでしたが、まあ内容がぱっと見でわかりやすい名前にしておくのが無難でしょう。
そして、typesディレクトリーの中から該当するパッケージのフォルダーを開き、その中のindex.d.tsに先程と全く同じ変更を加えます。
(VSCodeを使うと、ESLintのルールが途中で変わったせいかPrettierが勝手にその差分を整形してしまうので、あえてPrettierが自動で走らないSublime Textを使って編集しています。)
もちろん、ファイルを変更したら適宜コミットするのを忘れずに！
テストも型定義に合わせて修正する
index.d.tsと同じ階層にテストファイルがあるので、今行った型定義の修正に合わせてテストの内容も書き換えます。
今回は、オブジェクトに新しくenableMediaSessionプロパティーを追加して型定義した形になるので、テストファイルにも同じくプロパティーを追加します。
(厳密に言うと、enableMediaSessionはオプショナルプロパティーなのでテストファイルを書き換えなくてもエラーは発生しない。はず。)
テストを実行する
npm test パッケージ名でテストを実行してみます。
何やら不穏なエラーが…と思い調べてみたのですが、何も情報がヒットせず…
試しに変更を加えていない他のパッケージでも同様の方法でテストを実行してみたところ、同じエラーが発生したので一旦無視することにしました。
これ以外では特にエラーは発生していなかったので次のステップに行ってみます。
プルリクを作成する
無事ここまで来れたらあと少し！次はプルリクを作成します。
マークダウンの部分はプルリク作成画面を開くと同時に勝手にテンプレートから引用・入力されるので、内容を読んでいい感じに情報を書き換えます。
内容を確認して良さそうであればそのままプルリク作成しちゃいましょう！(今回作成したPRはこちら)
プルリクを作成すると自動でテストが走るのですが、さっきのnpm testで意味不明なエラーが出ているので無事通るか心配でしたw
マージまで
あとはこのtypescript-botというボットがよしなに案内してくれるのでそれに従えばOKです。
流れとしては、
パッケージの型定義メンテナーからコードレビューを受け、
無事Approveされると、例のtypescript-botから「レビューも完了したからもうマージできるよ！Ready to mergeって送信してくれれば勝手にマージしとくよ！」みたいなメッセージが来るので、それ通りにメッセージを送信します。
無事にmasterにマージされましたね👍
あとがき
今回は修正内容が簡単だったのもあり、比較的簡単にマージまで漕ぎ着けることができました。今後も型定義が古くなっていることに気づいたら、積極的にプルリク作成してOSSの発展に貢献したいです！
コメント