React-Tableを使用したJavaScriptをTypeScriptへ変換する件

Question

前提・実現したいこと

React Tableの紹介を参考に、React-Tableを使用したデータテーブルを作成しています。
今回の問題は【フィルター付きテーブル】の部分です。
以下へ記載するJavaScriptをTypeScriptへ変換したところ、エラーが発生しました。
一部のエラーが解決できませんでしたので、ご助力よろしくお願いいたします。

TypeScript 21行目の"[id]"部分

型 'string[]' はインデックスの型として使用できません。ts(2538)

該当のソースコード

import React, { useMemo } from 'react';

export const columns = [
  {
    Header: 'Name',
    Footer: info => `Count: ${info.rows.length}`,
    columns: [
      {
        Header: 'First Name',
        Footer: <hr />,
        accessor: 'firstName',
        filter: (rows, id, filterType) => rows.filter(row => row.values[id].startsWith(filterType)),
      },
      {
        Header: 'Last Name',
        accessor: 'lastName',
      },
    ],
  },
  {
    Header: 'Information',
    columns: [
      {
        Header: 'Age',
        accessor: 'age',
      },
      {
        Header: 'Gender',
        accessor: 'gender',
      },
      {
        Header: info => {
          const message = useMemo(
            () => {
              if (info.rows.length === 0) {
                return 'Unknown';
              }
              const range = info.rows.reduce((sum, row, i) => {
                if (i === 0) {
                  return sum;
                }
                return {min: Math.min(sum.min, row.values.grade), max: Math.max(sum.max, row.values.grade)}
              }, {min: info.rows[0].values.grade, max: info.rows[0].values.grade});
              return `${range.min} - ${range.max}`;
            },
            [info.rows]
          )
    
          return `Grade: (${message})`
        },
        accessor: 'grade',
      },
    ],
  },
];

import React, { useMemo } from 'react';
import { Column } from "react-table";

export interface Data {
  firstName: string;
  lastName: string;
  age: number;
  gender: string;
  grade: number;
}

export const columns: Column<Data>[] = [
  {
    Header: 'Name',
    Footer: info => `Count: ${info.rows.length}`,
    columns: [
      {
        Header: 'First Name',
        Footer: <hr />,
        accessor: 'firstName',
        filter: (rows, id, filterType) => rows.filter(row => row.values[id].startsWith(filterType)),
      },
      {
        Header: 'Last Name',
        accessor: 'lastName',
      },
    ],
  },
  {
    Header: 'Information',
    columns: [
      {
        Header: 'Age',
        accessor: 'age',
      },
      {
        Header: 'Gender',
        accessor: 'gender',
      },
      {
        Header: info => {
          const message = useMemo(
            () => {
              if (info.rows.length === 0) {
                return 'Unknown';
              }
              const range = info.rows.reduce((sum, row, i) => {
                if (i === 0) {
                  return sum;
                }
                return {min: Math.min(sum.min, row.values.grade), max: Math.max(sum.max, row.values.grade)}
              }, {min: info.rows[0].values.grade, max: info.rows[0].values.grade});
              return `${range.min} - ${range.max}`;
            },
            [info.rows]
          )
    
          return `Grade: (${message})`
        },
        accessor: 'grade',
      },
    ],
  },
];

試したこと

any型やtoString()でエラー回避はできます。
しかし、根本的な解決ではありませんでした。

補足情報（FW/ツールのバージョンなど）

TypeScript
JavaScript
React-Table
VSCode

Answer 1

これによると、typescriptでreact-tableの必要機能を使うには、ローカルで型定義を拡張しないとダメぽいです。

import { UseFiltersColumnOptions } from "react-table";

declare module 'react-table' {
    export interface ColumnInterface<D extends object = {}> extends UseFiltersColumnOptions<D> {}
}

上記を「src/@types」以下にて、「hogehoge.d.ts」とかに記述して下さい。

※バージョンによって記載は変わるかもしれません。

※「src/@types」の場所が都合悪い or イヤな場合、tsconfig.json で変更して下さい。

{
  "compilerOptions": {
    "typeRoots": ["./src/@types"]  <-- 好きな場所を。
  }
}

Comments

[退会済みユーザー]

ご回答いただき、ありがとうございました。
「hogehoge.d.ts」で定義することが必要だったんですね。
TypeScriptは想定よりも難しいと感じております、、。