Angular2中如何让引入的JavaScript文件内容在全局命名空间可用

你已经完成了第一步配置：将三个JS文件添加到angular.json的scripts数组中，此时这些文件里定义的全局变量和函数都已经挂载到了浏览器的window全局对象上，只需要让TypeScript识别这些全局成员，避免报「未定义」错误即可，下面提供两种常用实现方案：

方案1：单组件临时声明（适合少数组件调用的场景） #

哪个组件需要用到这些全局变量，就在对应.ts文件的最顶部、@Component装饰器之前添加变量声明即可，示例：

// 告诉TypeScript这些是已存在的全局变量，不需要做未定义检测
declare var wgssSignatureSDK: any;
declare var sigObj: any;
declare var sigCtl: any;
declare var dynCapt: any;
declare var wizCtl: any;
declare var scriptIsRunning: boolean;
declare var pad: any;
declare var inputObj: any;
// 其他全局函数也用同样格式声明，比如 declare function 函数名(): 返回值类型;

@Component({
  // 你的组件原有配置
})
export class YourComponent {
  // 组件内直接调用即可
  testSdk() {
    console.log(wgssSignatureSDK);
  }
}

方案2：全局定义类型（适合多组件调用的场景） #

如果多个组件都需要用到这些SDK成员，可以统一配置全局类型，避免每个组件重复声明：

1. 在项目src目录下新建typings.d.ts文件（如果已有直接修改即可），添加如下内容：

declare global {
  interface Window {
    wgssSignatureSDK: any;
    sigObj: any;
    sigCtl: any;
    dynCapt: any;
    wizCtl: any;
    scriptIsRunning: boolean;
    pad: any;
    inputObj: any;
    // 其他全局函数也在这里补充定义
  }
}
export {};

2. 之后所有组件直接通过window.变量名就能访问对应成员，比如console.log(window.wgssSignatureSDK)。

注意事项 #

如果调用时变量值为null，大概率是组件执行逻辑时，JS文件还没加载完成，可以把调用逻辑放到ngAfterViewInit生命周期中执行，或者加一层存在性判断：

ngAfterViewInit() {
  if(window.wgssSignatureSDK) {
    // 执行你的业务逻辑
  }
}

如果你清楚这些变量的具体类型，把上面代码里的any替换成对应类型即可，不清楚的话直接用any完全不影响正常运行。

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