在React TypeScript项目中使用@trendmicro/react-sidenav遇类型定义问题求助

方案1：自行编写类型声明文件 #

这是最靠谱的长期解决方案，步骤如下：

• 在项目根目录创建路径src/types/@trendmicro/react-sidenav/，然后新建index.d.ts文件
• 将以下基础类型声明写入文件（可根据库的实际API补充更多属性）：

declare module '@trendmicro/react-sidenav' {
    import * as React from 'react';

    export interface SideNavProps extends React.HTMLAttributes<HTMLDivElement> {
        onSelect?: (selected: string) => void;
        expanded?: boolean;
    }

    export const SideNav: React.FC<SideNavProps>;
    export const Toggle: React.FC<React.HTMLAttributes<HTMLButtonElement>>;
    export const Nav: React.FC<React.HTMLAttributes<HTMLUListElement>>;
    export const NavItem: React.FC<{ eventKey: string } & React.HTMLAttributes<HTMLLIElement>>;
    export const NavIcon: React.FC<React.HTMLAttributes<HTMLSpanElement>>;
    export const NavText: React.FC<React.HTMLAttributes<HTMLSpanElement>>;
}

• 打开tsconfig.json，确保typeRoots包含自定义类型目录：

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

方案2：尝试安装社区维护的类型包 #

先看看有没有社区贡献的类型定义，执行以下命令试试：

npm install @types/trendmicro__react-sidenav --save-dev
# 或者用yarn
yarn add @types/trendmicro__react-sidenav -D

如果安装成功，TypeScript会自动识别这些类型，无需额外配置。

方案3：临时跳过类型检查（应急用，不推荐长期使用） #

如果只是临时需要跑通项目，可以用以下两种方式：

• 在导入语句前加忽略注释：

// @ts-ignore
import SideNav, { Toggle, Nav, NavItem, NavIcon, NavText } from '@trendmicro/react-sidenav';

• 或者在tsconfig.json中开启skipLibCheck跳过所有第三方库的类型检查：

{
    "compilerOptions": {
        "skipLibCheck": true
    }
}

注意：这个选项会跳过所有库的类型校验，可能隐藏其他潜在问题，谨慎使用。

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