React TypeScript项目引入无@types声明JS包的新手教程求荐

算力阿峰

2026-9-29

React TypeScript 无类型第三方包引入操作指南

方案1：临时允许引入JS文件（快速适配，适合临时测试）

这个方案不需要编写类型，配置成本最低：

在compilerOptions配置项中添加/修改两个参数：

{
  "compilerOptions": {
    // 允许编译JS文件
    "allowJs": true,
    // 关闭对所有JS文件的类型检查
    "checkJs": false,
    // 其他原有配置保持不变
  }
}

配置保存后重启本地开发服务即可直接引入JS第三方包使用，TS不会再抛出类型报错。如果仅想针对单个包忽略类型，不需要修改上面的配置，只需要在引入语句的上一行加// @ts-ignore注释即可，示例：
```
// @ts-ignore
import SomePackage from '无类型的第三方包名'
```

如果这个包需要长期在项目里使用，推荐补充自定义类型声明，步骤如下：

第一步：确认类型声明存放路径
打开tsconfig.json，检查include配置项，通常默认会包含src目录下所有文件，你可以直接在src目录下新建types文件夹专门存放自定义声明，也可以直接在根目录新建typings文件夹，只要确保文件夹在include的包含范围内即可。
第二步：新建声明文件
在你选定的声明文件夹下，新建和第三方包同名的声明文件，比如包名叫test-js-pkg，就新建test-js-pkg.d.ts文件。
第三步：编写声明内容
如果暂时不想写完整的类型定义，只想让TS不报错，可以先写通配声明：
```
declare module 'test-js-pkg' {
  const content: any;
  export default content;
}
```
如果要补全完整类型，只需要对照包的导出内容补充对应类型即可，比如这个包导出了一个接收数字参数返回字符串的函数getResult，还有一个字符串类型的常量VERSION，就可以写成：
```
declare module 'test-js-pkg' {
  export const VERSION: string;
  export function getResult(num: number): string;
  // 其他导出的内容按实际情况补充
}
```
第四步：配置生效
保存声明文件后重启TS服务即可正常引入该包，同时会有对应的类型提示。如果使用VSCode开发，可以按快捷键Ctrl+Shift+P，输入「Restart TS Server」回车快速重启TS服务。

如果原有旧版本@types声明只有部分内容不匹配，你可以直接在自己的自定义声明文件里覆盖对应字段的类型即可，不需要完全重写所有内容。

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