🥦

DefinitelyTypedにはじめてプルリクを出したのでやり方をメモ【人生初OSSコミット】

2024/01/26に公開

DefinitelyTypedにプルリクを送った話を書きます。

(人生初OSS活動でした🌎)

経緯

最近、react-calendar-heatmapというライブラリを使う機会がありました。

GitHubで使われているようなヒートマップを表示してくれるライブラリです👇
▲しずかなインターネットでも使用されてみたいです

とても便利なライブラリなのですが、以下のような状況でした。

  • 本体パッケージにTypeScriptの型が含まれていない
  • DefinitelyTypedにはあるが、anyが多い

一言でいうと「つらい」。

そんなわけでDefinitelyTypedの型ファイルを見たところ、「自分でも直せそう」と思いました。
それくらい簡単でした。

なので、直してプルリクを出してみることにしました。

プルリクを出すまでの流れ

先に書いておくと、これが実際に出したプルリクです👇
Reduce Usage of 'any' Type by penpendayo · Pull Request #67976

直す

今回直す型はこれです👇

index.d.ts
import * as React from "react";

export interface Props {
    classForValue?: ((value: any) => any) | undefined;
    endDate?: string | number | Date | undefined;
    gutterSize?: number | undefined;
    horizontal?: boolean | undefined;
    monthLabels?: string[] | undefined;
    numDays?: number | undefined;
    onClick?: ((value: any) => void) | undefined;
    onMouseLeave?: ((e: any, value: any) => void) | undefined;
    onMouseOver?: ((e: any, value: any) => void) | undefined;
    showMonthLabels?: boolean | undefined;
    showOutOfRangeDays?: boolean | undefined;
    showWeekdayLabels?: boolean | undefined;
    startDate?: string | number | Date | undefined;
    titleForValue?: ((value: any) => any) | undefined;
    tooltipDataAttrs?: object | undefined;
    transformDayElement?: ((rect: any, value: any, index: number) => any) | undefined;
    values: any[];
    weekdayLabels?: string[] | undefined;
}

export default class ReactCalendarHeatmap extends React.Component<Props> {}

たったこれだけです!

しかも、anyの部分を直すだけ!内容もかんたん!

そんなわけで、型を修正していきます!

今回の場合、ドキュメントに型情報が記載されていなかったので、本体のコードを見て読み解きました。メインのファイルは1つだけだったのでかんたんでした!

というわけで、修正した結果がこちらのdiffになります。

修正後の型がきちんと合っているか確認するために、ローカルのnode_module/react-calendar-heatmapの型を書き換えて一通り動作を確認しました。

あとはプルリクを出すだけです!

プルリクを出す

プルリクを出す手順は、DefinitelyTypedのReadmeに詳しく書いています。

今回のように修正するだけなら、以下のようにします。

  1. DefinitelyTypedリポジトリを自分のアカウントにForkする
  2. ForkしたリポジトリをローカルにCloneする
  3. 修正したパッケージディレクトリの中にある型ファイルを修正する
    • 必要に応じてテストファイルも修正する
  4. コミットして自分のリポジトリにpushする
  5. 自分のリポジトリ → DefinitelyTypedリポジトリに対してプルリクを出す
    ▲「修正する場合はこれにチェック入れてね」的なテンプレがあるので、それ通りにします

そんなわけで無事マージされました!

このように簡単に修正できるライブラリもあるので「なにか手始めにOSS活動してみたいなー」と思っている人は、DefinitelyTypedがオススメです!

アガルートテクノロジーズ/PrAha

Discussion