Angular 12导入JS文件提示找不到声明文件错误如何解决

Angular 12 默认启用了更严格的 TypeScript 类型校验规则，未携带类型声明的 JavaScript 文件会被识别为隐式 any 类型，触发报错。Angular 9 版本默认校验规则宽松，因此可以正常运行。

下面给出4种可行方案，可根据你的项目需求选择：

• 方案1：单文件临时忽略校验 #

  在导入JS文件的语句上方加一行注释忽略当前行的类型校验，适合临时调试、仅少量文件导入JS的场景：

  // @ts-ignore
  import * as script from 'src/assets/js/file.js';
  

• 方案2：全局声明所有JS文件类型 #

  在项目src目录下新建typings.d.ts文件（如果已有直接追加内容），添加全局JS模块声明，所有JS文件导入都会自动识别为合法模块：

  declare module '*.js' {
    const content: any;
    export default content;
  }
  

  配置完成后重启Angular开发服务即可生效，无需修改原有导入逻辑。

• 方案3：为当前JS文件编写专属类型声明 #

  如果你需要严格的类型提示，可单独为这个JS文件编写声明文件。在src/assets/js/目录下新建file.d.ts，内容如下：

  declare const mainHandler: {
    init: () => void;
    closeMenu: () => void;
  };
  export default mainHandler;
  

  该方案可以获得完整的TS类型提示，适合长期维护的项目。

• 方案4：通过angular.json全局引入JS文件 #

  你也可以直接把静态JS文件配置到Angular的全局脚本加载项中，无需在组件内导入。

  1. 打开angular.json，找到projects -> 你的项目名 -> architect -> build -> options -> scripts数组，添加JS文件路径：

     "scripts": [
       "src/assets/js/file.js"
     ]
     

  2. 因为你的JS文件导出的mainHandler会挂载到全局window对象，组件内直接调用即可：

     declare const mainHandler: any;
     
     ngOnInit() {
       mainHandler.init();
     }
     

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