How to import Javascript file into Typescript

Question

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

$('.carousel').carousel()

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.

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)

Thanks for helping out.

Answer 1

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.

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