如何從 Typescript ZA2F2ED4F8EBC2CBB4C21A29DC41AB61 和 Microsoft Edge 調用 Javascript function？

Question

In an angular 7 project i need to use a javascript function from a Typescript class, where i'm using declare var getFormData: any; 使用 function getFomData，它在 Chrome 和 Firefox 中工作正常，但在 Internet Explorer 11 和 Edge 42 中我收到錯誤“ReferenceError：'getFormData'未定義

我只是將 function 稱為getFormData(this.formElement);

我發現可行的唯一方法是當我將整個 javascript 復制到 typescript class 中時。

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 function，如下所示：

1. 將.js文件放在assets/javascript文件夾中。 例如，我在這里使用demo.js ：

    export function test1(){ console.log('Calling test 1 function'); }

2. 在assets/javascript文件夾中創建demo.d.ts文件。 .js文件和.d.ts文件應該具有相同的名稱：

    export declare function test1();

3. 在component.ts文件中調用javascript function：

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

我在 Chrome、Edge 和 IE 中對其進行了測試，並且可以正常工作。 你可以在這里找到整個演示。