Angular 12中如何从JS文件调用函数至TS文件

我正在使用基于JavaScript构建的外部API，需要调用JS文件中的函数。主文件位于src/assets/openlayers/scripts/main.js，已在index.html中导入所有相关JS文件：

<script src="/assets/openlayers/scripts/libs/jquery-1.10.2.min.js"></script>
<script src="/assets/openlayers/scripts/libs/jquery-ui-1.10.3.custom/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/assets/openlayers/scripts/libs/proj4js-1.1.0/proj4js-compressed.js"></script>
<script src="/assets/openlayers/scripts/libs/OpenLayers-2.13.1/OpenLayers.js"></script>

<script src="/assets/openlayers/scripts/main.js"></script>
<script src="/assets/openlayers/scripts/classes/event.js"></script>
<script src="/assets/openlayers/scripts/classes/drawing.js"></script>
<script src="/assets/openlayers/scripts/classes/culturesDrawing.js"></script>
<script src="/assets/openlayers/scripts/classes/cultureMarkerDrawing.js"></script>
<script src="/assets/openlayers/scripts/map/map.initialize.js"></script>
<script src="/assets/openlayers/scripts/map/map.js"></script>
<script src="/assets/openlayers/scripts/map/map.tool.js"></script>
<script src="/assets/openlayers/scripts/map/map.tools.js"></script>
<script src="/assets/openlayers/scripts/map/map.cookies.js"></script>
<script src="/assets/openlayers/scripts/map/map.custom.controls.js"></script>
<script src="/assets/openlayers/scripts/map/map.contextmenu.js"></script>
<script src="/assets/openlayers/scripts/map/map.info.js"></script>
<script src="/assets/openlayers/scripts/map/map.drawingLayer.js"></script>
<script src="/assets/openlayers/scripts/map/map.layerStyle.js"></script>
<script src="/assets/openlayers/scripts/map/map.spatialLayer.js"></script>
<script src="/assets/openlayers/scripts/map/map.rasterLayer.js"></script>
<script src="/assets/openlayers/scripts/map/map.Legend.js"></script>
<script src="/assets/openlayers/scripts/map/map.rasterLegend.js"></script>
<script src="/assets/openlayers/scripts/map/map.layerSwitcher.js"></script>
<script src="/assets/openlayers/scripts/map/map.tooltip.js"></script>
<script src="/assets/openlayers/scripts/map/map.obsolete.js"></script>

现在需要在.ts文件中调用main.js里的部分函数，但不想像下面这样逐个在TS文件中声明变量：

declare var drawGauge: any;

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

@Component({
  selector: 'app-geospacial-map',
  templateUrl: './geospatial-map.component.html',
  styleUrls: ['./geospatial-map.component.scss'],
})
export class GeospacialMapComponent implements OnInit {

  constructor() {}

  ngOnInit(): void {

  }
}

请问是否可以全局访问该JS文件中的所有内容？

当然可以通过以下几种方式实现全局访问，避免逐个声明变量：

1. 创建全局类型声明文件（推荐） #

在项目的src目录下新建一个全局类型声明文件（比如global.d.ts），在里面统一声明main.js暴露的全局变量/函数，所有TS文件都会自动识别这些声明：

// src/global.d.ts
// 如果main.js的函数挂载在window对象上
declare interface Window {
  drawGauge: any;
  // 把main.js中需要访问的所有函数、属性都添加到这里
  anotherFunction: () => void;
  someGlobalValue: string;
}

// 如果main.js有独立的全局命名空间
declare namespace MainScripts {
  function drawGauge(): void;
  function createMarker(): void;
}

之后在任意TS文件中直接使用：

// 挂载在window的情况
window.drawGauge();

// 独立命名空间的情况
MainScripts.createMarker();

如果不想写具体类型，直接用any即可，这样既能避免逐个声明，还能获得基本的代码提示。

2. 修改JS文件为ES模块（若允许修改JS代码） #

如果可以修改main.js，把它改成ES模块格式，导出需要的函数：

// main.js
export function drawGauge() {
  // 原函数逻辑
}

export function anotherFunction() {
  // 原函数逻辑
}

之后在TS文件中直接导入使用：

import * as MainScripts from '../assets/openlayers/scripts/main.js';

MainScripts.drawGauge();

3. 临时方案：使用类型断言直接访问 #

如果只是临时使用，不想创建声明文件，可以直接通过window对象加类型断言访问：

(window as any).drawGauge();

这种方式无需额外声明，但没有类型提示，适合快速测试场景。

内容的提问来源于stack exchange，提问作者Gonçalo Bastos