React-table类型声明合并失效：TableInstance无指定属性

核心原因 #

react-table的默认类型未包含分页相关属性，需手动扩展类型声明，且要确保TypeScript能正确识别自定义声明文件。

分步解决 #

1. 规范声明文件的命名与位置 #

• 声明文件必须以.d.ts结尾，比如命名为react-table.d.ts，推荐放在src目录下（TypeScript默认会扫描src下的声明文件）；若放在根目录，需在tsconfig.json的include数组中添加该文件路径：

  {
    "include": ["src/**/*", "./react-table.d.ts"]
  }
  

2. 正确编写类型扩展代码 #

打开.d.ts文件，按以下格式编写，替换X为你实际用到的分页属性（比如page、canNextPage等）：

import { TableInstance } from 'react-table';

declare module 'react-table' {
  export interface TableInstance<D extends Record<string, unknown>> {
    page: Array<D>;
    canPreviousPage: boolean;
    canNextPage: boolean;
    pageCount: number;
    goToPage: (pageIndex: number) => void;
    nextPage: () => void;
    previousPage: () => void;
    setPageSize: (size: number) => void;
    // 替换成你报错的X属性
  }
}

注：若项目用了自定义数据类型，需对应调整D的泛型约束。

3. 重启TypeScript服务 #

VS Code的TypeScript服务有时不会自动刷新声明文件，按Ctrl+Shift+P（Windows）/Cmd+Shift+P（Mac），输入TypeScript: Restart TS Server重启后，再检查报错是否消失。

4. 确认react-table版本 #

上述写法适用于v7版本，若为旧版本，类型扩展方式不同，先查看package.json中react-table的版本是否为v7.x。

额外排查点 #

• 声明文件内不要写无关代码（比如导入非必要模块），避免干扰类型识别
• 检查tsconfig.json的compilerOptions，若开启strict模式，需确保扩展的属性符合类型约束，必要时调整strictNullChecks等选项

内容的提问来源于stack exchange，提问作者D.Zet