如何从适用于 Internet Explorer 11 和 Microsoft Edge 的 Typescript class 调用 Javascript 函数？

Question

在 angular 7 项目中，我需要使用来自 Typescript class 的 javascript 函数，我正在使用 declare var getFormData: any; 使用函数 getFomData，它在 Chrome 和 Firefox 中工作正常，但在 Internet Explorer 11 和 Edge 42 中我得到错误 "ReferenceError: 'getFormData' 未定义

我只是将函数调用为 getFormData(this.formElement);

我发现唯一可行的方法是在打字稿 class.

中复制整个 javascript

tsconfig.json

        "compilerOptions": {
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "removeComments": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",`
        "lib": ["es2017", "dom"],

摘自angular.json：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "project_name": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": ["src/assets", "src/favicon.ico", "src/manifest.json"],            
            "scripts": [
              "node_modules/chart.js/dist/Chart.bundle.min.js",              
              "src/assets/libs/jquery.js",             
              "src/assets/libs/getformdata.js",
              "src/assets/libs/flatpickr.js"
            ]
          },
          "configurations": {
            "dev": {
              "optimization": false,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
        ....
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "project_name:build"
          },
          "configurations": {
            "dev": {
              "browserTarget": "project_name:build:dev"
            },

提前致谢！！

Answer 1

您可以在 .ts 文件中调用 javascript 函数，如下所示：

将 .js 文件放入 assets/javascript 文件夹。比如我这里用demo.js：
```
export function test1(){
  console.log('Calling test 1 function');
}
```
在 assets/javascript 文件夹中创建 demo.d.ts 文件。 .js 文件和 .d.ts 文件应具有相同的名称：
```
export declare function test1();
```

调用component.ts文件中的javascript函数:

import { test1 } from '../assets/javascript/demo'; 
...
export class AppComponent {
  constructor() {
    test1();
  }
}

我在 Chrome、Edge 和 IE 中对其进行了测试，它可以正常工作。您可以找到整个演示 here.

如何从适用于 Internet Explorer 11 和 Microsoft Edge 的 Typescript class 调用 Javascript 函数？

How to call a Javascript function from a Typescript class that works with Internet Explorer 11 and Microsoft Edge?

javascript

typescript

internet-explorer-11

microsoft-edge

angular7