Angular 4项目中如何从TypeScript组件访问JS文件中的函数X？

嘿，这事儿其实挺简单的！既然你已经把/assets/js/MyFile.js配置到angular-cli.json的scripts里了，JS文件里的函数X已经挂载到全局作用域了——只是TypeScript还“看不见”它，咱们只需要给TS一个类型提示就行，具体有两种常用方式：

方式一：在单个组件内声明（适合仅当前组件使用的情况） #

在你的TypeScript组件文件顶部（import语句前后都可以），添加一行声明代码，告诉TS全局存在这个函数：

// 根据你的函数实际参数和返回值调整类型，这里用any是通用写法
declare function X(...args: any[]): any;

之后你就能在组件的方法里直接调用X()了，比如：

export class MyComponent {
  callFunctionX() {
    X(); // 直接调用，TS不会报错啦
  }
}

方式二：全局类型声明（适合多个组件共用的情况） #

如果多个组件都要用到函数X，推荐创建一个全局类型声明文件，避免每个组件都重复写声明：

1. 在src目录下新建（如果没有的话）typings.d.ts文件
2. 在文件里添加函数X的声明：

declare function X(input: string): number; // 这里替换成你函数实际的参数和返回值类型

这样所有组件都能直接调用X()，不用再单独声明。

小提醒 #

• 记得把any换成函数实际的参数和返回值类型，比如如果X接受一个字符串、返回布尔值，就写成declare function X(name: string): boolean;，这样TS能帮你做类型检查，避免调用出错
• 如果修改了angular-cli.json后没生效，重启一下ng serve就好啦

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