react-table + TypeScriptのお作法

プラグイン(useSortBy, usePagenationなど)を使った場合、型が合わなくて泣きそうになった。この解決方法が公式に載っていないので、悩んだ人のためのメモ。

前提

@types/react-tableを見るとそれっぽい型が定義されている。ただ、これらは標準では使えず、以下のいずれかの方法で使うことになる。

方法1 アンビエントモジュール

以下のファイルのような型定義で、グローバルな型を拡張してしまう。
https://github.com/ggascoigne/react-table-example/blob/master/types/react-table-config.d.ts

このファイルはプラグイン全部入りだけど、このうち必要なものだけを選んで使えば悪くなさそう。

欠点は、プロジェクト内で使うプラグインが統一されていない場合、TypeScriptの型と実行時の型が合わなくなってしまうこと。

方法2 キャスト

随時キャストする。

以下のコードは、useSortBy, usePaginationを使った場合のキャストの例。

どの型をどう拡張するべきかは、方法1で示したリンクを見れば分かるはずだけど、それなりに悩む。

export type columnOption<D extends object> = Column<D> & UseSortByOptions<D>;

const Table = <D extends object>({
  columns,
  data,
}: {
  columns: columnOption<D>[];
  data: D[];
}) => {
  const table = useTable<D>(
    {
      columns,
      data,
    },
    useSortBy,
    usePagination
  ) as TableInstance<D> &
    UsePaginationInstanceProps<D> & {
      state: TableState<D> & UsePaginationState<D>;
    };
  const { headerGroups } = table;
  return (
    <div>
      <thead>
        {headerGroups.map((headerGroup, headerGroupIndex) => (
          <tr {...headerGroup.getHeaderGroupProps()} key={headerGroupIndex}>
            {(
              headerGroup.headers as (HeaderGroup<D> &
                UseSortByColumnProps<D>)[]
            ).map((column) => (
              <div></div>
            ))}
          </tr>
        ))}
      </thead>
    </div>
  );
};