Angular 5.2.0中使用jsPDF及jspdf-autotable遇类型错误求助

我来帮你搞定这个Angular项目里的jsPDF插件编译错误问题，你遇到的核心问题是TypeScript不知道jsPDF实例上有autoTable这个方法（因为它是插件动态添加的），而直接用declare var jsPDF: any又会导致运行时找不到全局变量。下面是具体的解决步骤：

一、确认基础配置正确（你已经做了，但再核对下） #

首先确保你的依赖和脚本引入没问题：

1. package.json依赖：

   "dependencies": {
     ...
     "jspdf": "^1.3.5",
     "jspdf-autotable": "^2.3.2"
     ...
   }
   

2. angular-cli.json脚本配置：

   "scripts": [
     ...
     "../node_modules/jspdf/dist/jspdf.min.js",
     "../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
     ...
   ]
   

二、扩展jsPDF的TypeScript接口（推荐方案） #

TypeScript需要明确知道jsPDF有autoTable方法，我们可以通过扩展它的接口来实现：

1. 在你的项目中创建一个全局类型声明文件（比如src/typings.d.ts，如果已经存在就直接用），添加以下代码：

   declare module 'jspdf' {
     interface jsPDF {
       autoTable: (columns: any[], rows: any[], options?: any) => void;
     }
   }
   

   这样TypeScript编译器就会认可jsPDF实例上的autoTable方法了。

2. 回到组件中，保持原来的导入方式：

   import * as jsPDF from 'jspdf';
   import 'jspdf-autotable';
   
   @Component({
     selector: "energy-login",
     templateUrl: "./login.component.html",
     styleUrls: ["./login.component.scss"]
   })
   export class MyComponent implements OnInit {
     constructor() {}
     ngOnInit() {}
     downloadPDF() {
       let columns = ["ID", "Name", "Country"];
       let rows = [
         [1, "Shaw", "Tanzania"],
         [2, "Nelson", "Kazakhstan"],
         [3, "Garcia", "Madagascar"],
       ];
       let doc = new jsPDF('l', 'pt');
       doc.autoTable(columns, rows); // 现在不会有编译错误了
       doc.save('table.pdf');
     }
   }
   

三、临时替代方案（类型断言） #

如果不想创建类型声明文件，也可以用类型断言跳过TypeScript的类型检查：

let doc = new jsPDF('l', 'pt') as any;
doc.autoTable(columns, rows);

不过这种方式不够优雅，也失去了TypeScript的类型校验优势，所以还是推荐第一种方案。

为什么之前的方法不行？ #

• 用declare var jsPDF: any;时，Angular的模块系统并没有正确引入jsPDF模块，只是告诉编译器这个变量存在，但运行时环境里并没有全局的jsPDF变量，所以会报错ReferenceError: jsPDF is not defined。
• 直接导入jsPDF但不扩展接口的话，TypeScript只认识jsPDF本身的方法，不知道插件添加的autoTable，所以会出现编译错误。

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