在React TypeScript中使用react-horizontal-timeline模块报错的解决方法

你遇到的问题本质是react-horizontal-timeline没有社区维护的官方TypeScript类型定义包：npm仓库找不到对应的@types/react-horizontal-timeline包，所以安装失败；同时TypeScript无法识别组件的类型，导致代码报错。

下面是具体解决方案：

方案1：手动创建自定义类型声明文件（推荐长期使用） #

为组件手动添加类型声明，步骤如下：

• 在项目src目录下新建@types/react-horizontal-timeline/index.d.ts文件
• 在文件中写入基础类型声明（可根据组件实际支持的props补充）：

declare module 'react-horizontal-timeline' {
  import React from 'react';

  interface HorizontalTimelineProps {
    index: number;
    indexClick: (index: number) => void;
    values: string[];
    // 若使用组件其他props，可在此补充对应类型定义
  }

  const HorizontalTimeline: React.FC<HorizontalTimelineProps>;
  export default HorizontalTimeline;
}

• 修改tsconfig.json，确保TypeScript能识别自定义类型目录：

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./src/@types"]
  }
}

方案2：临时忽略类型错误（仅临时调试用） #

如果只是临时调试，不想编写类型声明，可以在导入组件的行上方添加注释，强制TypeScript忽略该行类型检查：

// @ts-ignore
import HorizontalTimeline from 'react-horizontal-timeline';

方案3：替换为有完善TS支持的组件 #

如果该组件长期无维护，类型问题难以彻底解决，建议替换为自带完整TypeScript类型的时间线组件，比如Material UI的时间线组件：

npm install @mui/material @mui/lab @emotion/react @emotion/styled

使用时直接导入@mui/lab/Timeline，无需额外安装类型包，官方文档有完整的TS使用示例。

内容的提问来源于stack exchange，提问作者BlueSea321