Twitter Bootstrap Question posted in

How to import Javascript file into Typescript – Twitter bootstrap

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.

Tags:

6

Answers


  1. Chosen as BEST ANSWER
    0

    In the end, I've changed my code to use the "InjectionToken". As described here: Use jQuery in Angular/Typescript without a type definition

    You can simply inject the jQuery global instance and use it. For this you won't be needing any type definitions or 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 },
];

    When set correctly in your 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 { }

    You can start using it in your components:

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

  2. 0

    I would refactor your carousel.js file like this:

    System.register("carousel/carousel", [], true, function(require, exports, module) {
  var carousel = function () {
    function carousel() {
    }
    carousel.prototype.start = function () {
        $('.carousel').carousel();
    }
  }
  exports.carousel = carousel;
});
    Login or Signup to reply.
  3. 0

    Create a file “jquery-caroussel.d.ts” (and add-it to your reference.ts)
    inside it:

    interface JQuery {
   carousel();
}

    It will say to the ts compilator than there is a methode carousel() which will be implemented later. (in the browser, by the carousel.js file.)

    If you have a similar issue with another lib than carousel, there is plenty of sample of interface here:https://github.com/DefinitelyTyped/DefinitelyTyped

    Login or Signup to reply.
  4. 0

    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;
}
    Login or Signup to reply.
  5. 0

    You can import JS files by declaring an ambient module for each library you need. You can have an ambient.d.ts file where you store all ambient module declarations (ie for JavaScript libraries you’d like to import, but for which you do not have the type definitions)

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

    any other *.ts file that needs my-module-i-want-to-import:

    // 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);
    Login or Signup to reply.
  6. 0

    After Angular’s Final Release, (for jquery.js and bootstrap.js)

    1) add following npm packages

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

    2) in tsconfig.json add following entries in types array,

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

    And now you are good to go now.

    Jquery carousel method error in Angular2/typescript

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search