如何將Javascript文件導入Typescript

Question

我想知道如何從Typescript啟動Twitter-Bootstrap。

$('.carousel').carousel()

我必須實現jquery.d.ts來修復$ -sign調用，但是我仍然得到jlecery.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)

謝謝你的幫助。

Answer 1

問題是你沒有carousel()的輸入定義。 就像你提到的那樣 - 它是Twitter-Bootstrap中的一個函數，但是你只包含了jQuery的輸入定義（* .d.ts） 。 您需要以相同的方式將它們包含在Bootstrap中。

您可以從他們的GitHub或作為NuGet包獲得DefinitelyTyped項目中的完整Bootstrap綁定定義。 以下是必不可少的部分：

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

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

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;
});

Answer 3

在其中創建一個文件“jquery-caroussel.d.ts”（並將其添加到reference.ts）：

interface JQuery {
   carousel();
}

它會對ts編譯器說，而不是有一個將在稍后實施的方法旋轉木馬（）。 （在瀏覽器中，由carousel.js文件。）

如果你有另一個lib而不是carousel的類似問題，這里有大量的接口示例： https ： //github.com/DefinitelyTyped/DefinitelyTyped

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;
}

任何其他需要my-module-i-want-to-import * .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);

Answer 5

最后，我改變了我的代碼以使用“InjectionToken”。 如下所述： 在沒有類型定義的情況下在Angular / Typescript中使用jQuery

您可以簡單地注入jQuery全局實例並使用它。 為此，您不需要任何類型定義或打字。

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();
    }
}

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": [
             "jquery",
             "bootstrap",  
           ]

現在你很高興現在去。

Angular2 / typescript中的Jquery輪播方法錯誤