Angular ngx-filesaver编译错误：属性'method'与索引签名不兼容

问题描述 #

执行以下操作后出现TypeScript编译错误：

1. 安装依赖：

npm install file-saver ngx-filesaver

2. 在app.module.ts中引入模块：

import { FileSaverModule } from 'ngx-filesaver';
...
@NgModule({
  imports: [
    ...
    FileSaverModule
  ],
  ...
})

错误信息 #

Error: node_modules/ngx-filesaver/src/filesaver.directive.d.ts:30:94 - error TS2344: Type '{ method: { alias: "method"; required: false; }; http: { alias: "http"; required: false; }; query: { alias: "query"; required: false; }; header: { alias: "header"; required: false; }; url: { alias: "url"; required: true; }; fileName: { ...; }; fsOptions: { ...; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
Property "method" is incompatible with index signature.
Type '{ alias: "method"; required: false; }' is not assignable to type 'string'.

30     static ɵdir: i0.ɵɵDirectiveDeclaration<FileSaverDirective, "[fileSaver]", ["fileSaver"], { "method": { "alias": "method"; "required": false; }; "http": { "alias": "http"; "required": false; }; "query": { "alias": "query"; "required": false; }; "header": { "alias": "header"; "required": false; }; "url": { "alias": "url"; "required": true; }; "fileName": { "alias": "fileName"; "required": false; }; "fsOptions": { "alias": "fsOptions"; "required": false; }; }, { "success": "success"; "error": "error"; }, never, never, true, never>;

原因分析 #

这是Angular版本与ngx-filesaver版本不兼容导致的：
ngx-filesaver v10及以上版本适配Angular 14+，这类版本的Angular在指令声明的输入属性语法上有更新，而你的项目Angular版本较低，无法识别新的类型定义结构。

解决方法 #

方法一：安装对应兼容版本（推荐） #

1. 卸载当前依赖：

npm uninstall ngx-filesaver file-saver

2. 根据你的Angular版本安装适配的版本：
   • Angular 13及以下：安装v9.x版本

     npm install ngx-filesaver@9 file-saver@2
     

   • 查看当前Angular版本：

     ng version
     

3. 保持app.module.ts中的引入代码不变，重新编译项目即可。

方法二：临时跳过类型检查（不推荐） #

在项目根目录的tsconfig.json中，修改compilerOptions添加：

"skipLibCheck": true

该配置会跳过第三方库的类型定义检查，暂时消除错误，但可能隐藏其他潜在的类型问题，仅作为临时应急方案。

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