Question

我正在研究Angular 2，我试图将TypeScript（.ts文件）包含在.js文件中。我想要包含的JavaScript文件是一个简单的谷歌地图文件，这里是：

<script>
var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
    });
}
</script>

我从here下载了google-maps.d.ts声明文件，我将此文件移到了.ts文件的同一个项目（和文件夹）中。

所以我有一个包含.ts，.js和google-maps.d.ts的文件夹。

我的.ts表示完整性：

import {Component, Injector, OnInit} from "angular2/core";
/// <reference path="./google-maps.d.ts" />

@Component({
    selector: 'my-map-selector',
    template: `
        <div id="map"></div>  // google map will appear here
    `,
})

export class mymapComponent {

}

现在，如何在.ts中导入.js文件？我试过/// <reference path="./google-maps.d.ts" />但没有任何事情发生（看不到地图）

Answer 1

实际上，.d.ts文件只描述了库的合同，但它不适用于运行时。

如果你想使用谷歌地图，你可以试试angular2-google-maps库，你需要通过添加相应的JS文件来配置它：

<script src="node_modules/angular2-google-maps/bundles/ angular2-google-maps.js"></script>

有关详细信息，请参阅此问题：

Import error of node packet in Angular2

Answer 2

要在打字稿代码中使用javascript文件，在脚本标记中声明它的源路径，下载它的.d.ts文件（如果可用），在tsd.d.ts文件中提供其路径。使用///引用来使用该输入文件。

如果.d.ts文件不可用，请声明该库的变量并使用该变量调用其他函数。

e.g。使用lodash.js代码

1）在脚本标记中声明它是.js src路径。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.1/lodash.js"></script>

2）在.ts文件中，您可以通过声明变量来使用它。 e.g。

declare var _:any;

看看它是否有效

此致

的Ajay

在TypeScript文件中包含JavaScript文件

2 个答案: