Question

我使用angular-cli

创建了非常标准的Angular 2应用程序

我希望能够使用自定义.js文件。简化的模拟版本看起来像这样：

'use strict';

var testingThing = testingThing || {};

testingThing.Client = function (name) {
    var self = this;
    console.log(name);

    this.parseUri = function (str) {
        console.log(str);
        return str;
    };

    return this;
};

// Node environment module
if (typeof window === 'undefined') {
    module.exports = testingThing;
}

我正在努力如何在打字稿组件中使用它。

我试过这个（或类似的，尝试过不同的东西）

export class TestService {

  something: any;

  constructor() {
    this.something = new testingThing.Client();
    var huh = this.something.new("test name");
    testingThing.parseUri("testParse");
  }

}

我尝试为它生成输入

declare namespace testingThing{

    class Client {
        new (name : string): /* testingThing.Client */ any;
    }

    function parseUri(str : any): any;
}

但是我在控制台中遇到错误，没有定义testingThing。

 Cannot read property 'Client' of undefined

当我尝试导入它时，它表示testingThing不是模块。

我确实将myCustom.js添加到angular-cli.json

"scripts": [
        "./myCustom.js"
      ],

我尝试了几种不同的互联网方法，所以我现在完全没有想法，我做错了什么。是我对它的使用，我的打字定义，还是其他任何东西。

我希望答案对于更多用于前端编程的人来说是显而易见的，但我现在已经堆叠了。

Answer 1

这就是我的工作原理，所以如果你遇到同样的问题并在这里发布这个Q，那么希望它也能帮到你:)（不确定它是否正确，但它适合我）。它被击中并错过了探索。很多失误，最后一击：

将自定义脚本包含在index.html的<script></script>标记中，如下所示：
```
<script src="./myCustom.js"></script>
```
应更改输入内容：
- 类而不是接口
- 构造函数而不是new方法（还需要删除返回值声明）

declare namespace testingThing 
{

      class Client {

        constructor(name: string)
      }

      function testFunction(str: any): string;}

然后样本用法将是：

import { Injectable } from '@angular/core';

@Injectable()
export class TestService {

  somethingElse: any;

  constructor() {
    this.somethingElse = new testingThing.Client("constructor");
    console.log(this.somethingElse);
    this.somethingElse.testFunction("test call to function inside");
  }

}

没有任何进口，＆＃34;要求＆＃34;或变量声明。

另外，你应该从angular-cli.json中删除脚本部分中的库（或者不包括它）。这不是必需的。

如何在TypeScript组件中的Angular 2 App中添加和使用自定义js文件

1 个答案: