如何将Javascript文件导入到Typescript中

Question

我想知道如何从Typescript开始使用Twitter-Bootstrap。

$('.carousel').carousel()

我不得不实现jquery.d.ts来修复$符号调用，但是我仍然收到错误提示，即在jquery.d.ts中找不到.carousel()。

我尝试使用将javascript捆绑为模块的方式来解决这个问题并进行调用。但它似乎不起作用。 这是我的代码：

carousel.d.ts

declare module 'carousel/carousel' {
    var start: any; 
    export = start;
}

carousel.js

System.register('carousel/carousel', [], true, function () {
    var carousel = function () {
        function carousel() {
        }
        carousel.prototype.start = function () {
            $('.carousel').carousel();
        }
    }
    exports.carousel = carousel;
});

app.ts

import {Component} from "angular2/core";
import {bootstrap} from 'angular2/platform/browser';
import {Carousel} from "carousel/carousel";

@Component({
    selector: "carousel",
    bindings: [CarouselComponent],
    templateUrl: 'carousel.html'
})

export class CarouselComponent {
    start() {
            carousel.start();
        }        
    }
}

bootstrap(CarouselComponent)

感谢您的帮助。

- Jeffrey Rosselle

---

你有没有看过这个问题 - https://dev59.com/Lmcs5IYBdhLWcg3wmlIK？- jQuery插件（以及其他基于插件的库）的问题在于，你不仅需要一个用于基本库的library.d.ts文件，还需要为每个插件准备一个plugin.d.ts文件。 - shershen

Answer 1

问题在于您没有carousel()的类型定义。正如您提到的那样——它是Twitter Bootstrap中的一个函数，但您只包含了jQuery的类型定义(*.d.ts)。您需要以相同的方式包含Bootstrap的类型定义。

您可以从DefinitelyTyped项目获取完整的Bootstrap类型定义，可以从他们的GitHub或作为NuGet软件包获取。这里是必要的部分：

interface CarouselOptions {
    interval?: number;
    pause?: string;
    wrap?: boolean;
    keybord?: boolean;
}

interface JQuery {
    carousel(options?: CarouselOptions): JQuery;
    carousel(command: string): JQuery;
}

- Gediminas Masaitis

---

这对我来说是最好的工作解决方案。 有点傻，我想到使用jquery.d.ts，但没有进一步思考并使用bootstrap：） - Jeffrey Rosselle

Answer 2

我会这样重构您的carousel.js文件：

System.register("carousel/carousel", [], true, function(require, exports, module) {
  var carousel = function () {
    function carousel() {
    }
    carousel.prototype.start = function () {
        $('.carousel').carousel();
    }
  }
  exports.carousel = carousel;
});

- Thierry Templier

---

仍然没有为我的项目完成它。 实现 .d.ts 库效果最佳。 - Jeffrey Rosselle

Answer 3

创建一个名为 "jquery-caroussel.d.ts" 的文件（并将其添加到您的 reference.ts 中） 在其中：

interface JQuery {
   carousel();
}

它会告诉ts编译器，稍后将实现一个名为carousel()的方法（在浏览器中，由carousel.js文件实现）。

如果您遇到与carousel不同的库类似的问题，则可以在此处找到许多接口示例：https://github.com/DefinitelyTyped/DefinitelyTyped。

- sab

Answer 4

您可以通过为每个需要的库声明一个环境模块来导入JS文件。您可以拥有一个ambient.d.ts文件，其中存储所有环境模块声明（即用于导入JavaScript库但没有类型定义的库）。

ambient.d.ts:

// You would have a separate module declaration for each JavaScript library
// you want to import for which you do not have any type definitions
declare module 'my-module-i-want-to-import' {
  const a : any;
  export default a;
}

任何需要引入我想要导入的模块的*.ts文件：

// Include reference to your ambient module declarations
///<reference path="./ambient.d.ts" />
import myModule from 'my-module-i-want-to-import';

// Do something with myModule
console.log(myModule);

- Calvin Belden

Answer 5

最终，我已经改变了我的代码，使用了“InjectionToken”。 如此描述：在没有类型定义的情况下在Angular/Typescript中使用jQuery 您可以简单地注入jQuery全局实例并使用它。 对于此操作，您不需要任何类型定义或typings。

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

export const JQ_TOKEN = new InjectionToken('jQuery');

export function jQueryFactory() {
    return window['jQuery'];
}

export const JQUERY_PROVIDER = [
    { provide: JQ_TOKEN, useFactory: jQueryFactory },
];

当在您的 app.module.ts 文件中正确设置时：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { JQ_TOKEN } from './jQuery.service';

declare let jQuery: Object;

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: JQ_TOKEN, useValue: jQuery }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

您可以在组件中开始使用它：

import { Component, Inject } from '@angular/core';
import { JQ_TOKEN } from './jQuery.service';

@Component({
    selector: "selector",
    templateUrl: 'somefile.html'
})
export class SomeComponent {
    constructor( @Inject(JQ_TOKEN) private $: any) { }

    somefunction() {
        this.$('...').doSomething();
    }
}

- Jeffrey Rosselle

Answer 6

Angular 正式发布后，（适用于 jquery.js 和 bootstrap.js）

1) 添加以下npm 包

  npm install --save-dev @types/jquery
  npm install --save-dev @types/bootstrap

2) 在 tsconfig.json 文件中，在 types 数组 中添加以下条目，

  "types": [
             "jquery",
             "bootstrap",  
           ]

现在你已经准备好了。

Angular2/typescript中Jquery轮播方法错误

- micronyks