Angular 5：为外部JS文件添加类型定义并集成CLI构建

我来帮你搞定这个问题！要在Angular里正确调用外部JS的foo.bar()，同时让TypeScript在构建时提供类型检查，你只需要按下面几个步骤配置就行：

1. 正确放置并配置类型定义文件 #

首先，把你的script.d.ts放在Angular项目能被TypeScript识别的位置，比如可以新建src/types/目录来存放自定义类型文件（没有这个目录就直接创建）。

然后修改项目根目录的tsconfig.json，告诉TypeScript编译器去哪里找这个类型文件：

• 打开tsconfig.json，在compilerOptions里添加typeRoots配置，把自定义类型目录加进去：

"compilerOptions": {
  // 其他已有的配置...
  "typeRoots": ["node_modules/@types", "src/types"]
}

或者，也可以在include数组里直接包含这个类型文件：

"include": [
  "src/**/*",
  "src/types/**/*.d.ts"
]

2. 完善类型定义文件内容 #

在script.d.ts里，要准确声明外部JS的命名空间和方法结构，比如如果bar()是无参数无返回值的函数，就这么写：

declare namespace foo {
  function bar(): void;
  // 如果bar有参数或返回值，比如function bar(id: number): string，就对应修改声明
}

一定要保证这个声明和外部JS里的实际实现一致，这样类型检查才会准确有效。

3. 在Angular组件中调用方法 #

因为foo是全局命名空间，你不需要在组件里import它，直接调用就行。不过要注意外部JS必须在Angular代码执行前加载完成——比如把加载外部JS的<script>标签放在index.html的<head>里，或者Angular的main.js脚本之前。

示例组件代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
  ngOnInit(): void {
    // 直接调用全局命名空间的方法
    foo.bar();
  }
}

如果外部JS是异步加载的，你需要先确保它加载完成再调用，比如监听DOMContentLoaded事件，或者用动态脚本加载的方式处理加载完成后的回调。

4. 验证类型检查是否生效 #

现在试试在组件里写foo.baz()（一个不存在的方法），如果TypeScript编译器报错，说明你的类型定义已经生效了——这就是我们想要的构建时类型检查效果！

额外注意事项 #

• 如果你的tsconfig.json开启了"noImplicitAny": true，这个类型定义就尤为重要，不然TypeScript会把foo当成any类型，失去类型检查的意义。
• 不要尝试在组件里import foo，因为它是全局命名空间，import会让TypeScript误认为它是模块级别的变量，反而找不到。

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