Question

我有一个带有以下内容的js文件，js文件中的代码将来会增加，所以没有选择使它成为.ts文件我希望它只是一个js文件。

var myModule = {};
myModule.myFunction = function(){console.log('I am inside myJs.js file');};
exports.myModule = myModule;

现在我有了我的角度项目，我试图将其作为模块导入并使用该对象。

也许喜欢？

import * as jsModule from 'myModule';

我尝试在angular.cli.json下添加此脚本标记，然后在typings.d.ts中创建一个条目declare var myModule:any;

但没有运气。

有人可以帮我理解如何在角度4类文件中导入该对象并使用它吗？

Answer 1

编辑：TL; DR

1 - 你的JS代码是

var myModule = {};
myModule.myFunction = function(){console.log('I am inside myJs.js file');};
exports.myModule = myModule;

2 - 创建包含

的定义文件

declare var myModule: { myFunction: Function };

3 - 将您的定义文件导入TS配置（tsconfig.json）

"files": [
  "path/to/your/definition/file.d.ts"
]

4 - 在您的组件中，只需使用（无声明，无任何内容）

myModule.myFunction();

每个用Typescript编写的代码（当然，只要它有效）都符合Javascript。

这意味着是，您可以使用此文件创建.ts文件（语法稍有变化，但仍然是相同的代码）

export const myModule = {
  myFunction: () => { console.log(`I'M PICKLE RIIIIIIIIIIIIIICK`); }
};

这是我对此事的两分钱。但是，嘿，你问了一些问题，我欠你一个答案：

如果要将JS文件导入TS文件，您需要做的是（假设您使用的是角度CLI）：

创建您的JS文件（duh）
打开您的angular-cli.json文件
找到scripts属性
将JS文件添加到此属性（默认路径从src/开始）

现在，您的文件将导入到您的项目中。这留下了两个选择：

在IDE中没有自动完成功能：

declare var myModule: any;
myModule.myFunction();

在IDE中自动完成：您必须创建一个定义文件，并将其添加到您的打字稿配置中。
- 在tsconfig.json，root：
```
"files": [
  "path/to/your/definition/file.d.ts"
]
```

在您的档案file.d.ts

中

declare var myModule: { myFunction: Function };

您必须导入每个定义文件，以及您希望在IDE中自动完成的每个属性。

现在，Typescript选项似乎并不那么糟糕，是吗？ :)

Answer 2

我认为有一些方法可以将JS文件导入Angular 4。这是常见的方法之一。

-script.store.ts

interface Scripts {
    name: string;
    src: string;
}
export const ScriptStore: Scripts[] = [
     {name: 'gmaps-scripts', src: '../../../assets/js/gmaps.js'},
];

-script.service.ts

import {Injectable} from "@angular/core";
import {Injectable} from "@angular/core";
import {ScriptStore} from "./script.store";

declare var document: any;

@Injectable()
export class ScriptService {

private scripts: any = {};

constructor() {
      ScriptStore.forEach((script: any) => {
            this.scripts[script.name] = {
                loaded: false,
                src: script.src
            };
      });
 }

 load(...scripts: string[]) {
      var promises: any[] = [];
      scripts.forEach((script) => promises.push(this.loadScript(script)));
      return Promise.all(promises);
 }

 loadScript(name: string) {
      return new Promise((resolve, reject) => {
           //resolve if already loaded
           if (this.scripts[name].loaded) {
               resolve({script: name, loaded: true, status: 'Already 
         Loaded'});
    }
    else {
        //load script
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = this.scripts[name].src;
        if (script.readyState) {  //IE
            script.onreadystatechange = () => {
                if (script.readyState === "loaded" || script.readyState === "complete") {
                    script.onreadystatechange = null;
                    this.scripts[name].loaded = true;
                    resolve({script: name, loaded: true, status: 'Loaded'});
                }
            };
        } else {  //Others
            script.onload = () => {
                this.scripts[name].loaded = true;
                resolve({script: name, loaded: true, status: 'Loaded'});
            };
        }
        script.onerror = (error: any) => resolve({script: name, loaded: false, status: 'Loaded'});
        document.getElementsByTagName('head')[0].appendChild(script);
    }
});
  }

 }

- your component component.ts

....
import { ScriptService } from '../../../services/script/script.service';
declare var google: any;
declare var GMaps: any;

....

this.mapsAPILoader.load().then(() => {
      this._script.load('gmaps-scripts').then(data => {
           ......
      })
})

以角度4调用js文件

2 个答案:

编辑：TL; DR