How to import a Javascript file into Typescript

Question

I was wondering how I start downloading Twitter-Bootstrap with Typescript.

$('.carousel').carousel() 

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

I tried to do this by associating javascript with the module and call it that. But it doesn't 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 the help.

Answer 1

The problem is that you do not have an input definition for carousel() . As you mentioned, this is a feature on Twitter-Bootstrap, but you only included input definitions (* .d.ts) for jQuery. You must enable them for Bootstrap in the same way.

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

 interface CarouselOptions { interval?: number; pause?: string; wrap?: boolean; keybord?: boolean; } interface JQuery { carousel(options?: CarouselOptions): JQuery; carousel(command: string): JQuery; } 

Answer 2

I would reorganize your carousel.js file as follows:

 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

Create the file "jquery-caroussel.d.ts" (and add it to your reference.ts) inside it:

 interface JQuery { carousel(); } 

It will tell the ts compiler that there is a carousel of the method (), which will be implemented later. (in the browser, in the carousel.js file.)

If you have a similar problem with a different lib than a carousel, there are many interface examples here: https://github.com/DefinitelyTyped/DefinitelyTyped

Answer 4

You can import JS files by declaring an environment module for each library. You may have an ambient.d.ts file where all declarations of the surrounding module are stored (i.e., for JavaScript libraries that you want to import, but for which you do not have 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 requires 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); 

Answer 5

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

You can simply enter the global jQuery instance and use it. You do not need type definitions or typing for this.

 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 installed correctly in your application .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(); } } 

Answer 6

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

1) add the following npm packages

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

2) in tsconfig.json add the following entries to the type array,

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

And now you are good to go.

Jouery carousel method error in Angular2 / typescript