非TypeScript模板React项目导入自研JS模块出现类型声明警告

为什么非TypeScript项目会出现这个警告？ #

VS Code自带的TypeScript语言服务，就算你的项目是纯JavaScript模板，也会默认对JS文件做类型检查增强。当你导入没有配套类型声明文件的JS模块时，TypeScript服务没法推断这个模块的类型，就会抛出“隐式any类型”的警告。

彻底解决的几种方法 #

方法1：给你的JS npm模块添加类型声明（推荐） #

这是最规范的方案，能让所有用到这个模块的项目都不再出警告：

• 在你的模块根目录新建index.d.ts文件，写入基础声明（可以根据模块实际导出内容补充具体类型，暂时不想写就用any占位）：

  declare module '你的模块名' {
    // 示例：如果模块导出一个函数
    export function demoFunc(str: string): void;
    // 如果是默认导出
    const defaultExport: any;
    export default defaultExport;
  }
  

• 在模块的package.json里加上types字段，指定声明文件路径：

  {
    "types": "./index.d.ts"
  }
  

• 重新发布模块，然后在你的React项目里重新安装这个模块，警告就会消失。

方法2：在React项目中添加局部类型声明 #

如果暂时不想修改npm模块，可以在当前React项目里加声明文件：

• 在项目根目录的src文件夹下新建types目录，再创建你的模块名.d.ts文件，写入：

  declare module '你的模块名';
  

• 确保VS Code能识别这个声明文件，项目根目录没有jsconfig.json的话就新建一个，内容如下：

  {
    "compilerOptions": {
      "baseUrl": "./src"
    },
    "include": ["src/**/*", "src/types/**/*"]
  }
  

方法3：关闭VS Code的JS类型检查（临时方案） #

如果只是想快速屏蔽警告，可以修改VS Code的设置：

• 打开设置（快捷键Ctrl+,或Cmd+,），搜索javascript.implicitProjectConfig.checkJs，把开关改成false。
• 也可以在项目根目录创建.vscode/settings.json，写入以下内容，只对当前项目生效：

  {
    "javascript.implicitProjectConfig.checkJs": false
  }
  

注意：这个方法会关闭所有JS文件的类型检查，不利于代码质量，不推荐长期用。

内容的提问来源于stack exchange，提问作者김정용