如何将 Javascript 文件导入 Typescript [英] How to import Javascript file into Typescript

问题描述

我想知道如何从 Typescript 启动 Twitter-Bootstrap.

I was wondering how I start the Twitter-Bootstrap from Typescript.

$('.carousel').carousel()

我必须实现 jquery.d.ts 来修复 $-sign 调用，但是我仍然收到 .carousel() 不能的错误可以在 jquery.d.ts 中找到.

I had to implement jquery.d.ts to fix the $-sign call, but then I'm still getting the error that .carousel() could not be found in jquery.d.ts.

我试图通过将 javascript 绑定到一个模块并像这样调用它来做到这一点.但它似乎不起作用.这是我的代码:

I tried to do this with bundling the javascript to a module and call it like that. But it does not seem to work. This is my code:

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)

感谢您的帮助.

推荐答案

问题是您没有 carousel() 的类型定义.就像你提到的 - 它是 Twitter-Bootstrap 中的一个函数，但你只包含了 jQuery 的类型定义 (*.d.ts) .您需要以相同的方式将它们包含在 Bootstrap 中.

The problem is that you don't have the typing definition for carousel(). Like you mentioned - it's a function in Twitter-Bootstrap, but you only included the typing definitions (*.d.ts) for jQuery. You need to include them for Bootstrap the same way.

您可以从绝对类型项目中获得完整的 Bootstrap 绑定定义，或者从他们的 GitHub 或作为 NuGet 包.以下是基本部分:

You can get the full Bootstrap tying definitions from the DefinitelyTyped project, either from their GitHub or as a NuGet package. Here are the essential parts:

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

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

这篇关于如何将 Javascript 文件导入 Typescript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！