Materialize 1.0.0升级1.1.0后React项目导入JS文件缺失声明文件如何解决

错误原因 #

这是TypeScript的类型检查提示（错误码ts(7016)），不是运行时错误，不影响代码实际执行。原因是你用的@materializecss/materialize包本身没有内置TS类型声明，也没有对应的第三方公开类型包，所以TS无法识别你导入的模块类型，才抛出该警告。

可选择的解决方法 #

• 方案1：尝试安装第三方类型包 #

  直接运行提示给出的安装命令：

  npm i --save-dev @types/materializecss__materialize
  

  如果安装成功没有报错，重启VS Code后警告就会自动消失。

• 方案2：手动添加类型声明文件 #

  如果方案1提示找不到对应类型包，就手动添加声明文件兼容：

  1. 在项目根目录（和tsconfig.json同级路径）新建typings.d.ts文件
  2. 写入以下内容：

  declare module '@materializecss/materialize/dist/js/materialize.js' {
    const M: any;
    export default M;
  }
  

  3. 保存文件后，按快捷键Ctrl+Shift+P（Mac系统为Cmd+Shift+P），搜索并执行Restart TypeScript Server，警告就会消除。

• 方案3：优化导入写法（额外推荐） #

  你可以不用写完整的dist路径导入，新版包已经做了默认导出配置，导入语句可以简化为：

  import '@materializecss/materialize/dist/css/materialize.min.css';
  import M from '@materializecss/materialize';
  

  如果简化后仍有警告，就把刚才的声明文件里的模块路径改成对应的值即可：

  declare module '@materializecss/materialize' {
    const M: any;
    export default M;
  }
  

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