Cómo importar files Javascript en Typescript

Me preguntaba cómo inicio Twitter-Bootstrap desde Typescript.

$('.carousel').carousel() 

Tuve que implementar jquery.d.ts para arreglar la llamada $ -sign, pero aún recibo el error de que no se pudo encontrar .carousel () en jquery.d.ts.

Traté de hacer esto agrupando el javascript en un module y llamándolo así. pero no parece funcionar. Este es mi código:

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

aplicaciones

 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) 

Gracias por ayudarme

El problema es que no tiene la definición de tipeo para carousel() . Como mencionaste, es una function en Twitter-Bootstrap, pero solo incluiste las definiciones de tipeo (* .d.ts) para jQuery. Debe includelos para Bootstrap de la misma manera.

Puede get las definiciones de vinculación de Bootstrap completas del proyecto DefinitelyTyped, ya sea desde su GitHub o como package NuGet . Aquí están las partes esenciales:

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

Refactorizaría tu file carousel.js así:

 System.register("carousel/carousel", [], true, function(require, exports, module) { var carousel = function () { function carousel() { } carousel.prototype.start = function () { $('.carousel').carousel(); } } exports.carousel = carousel; }); 

Cree un file "jquery-caroussel.d.ts" (y agréguelo a su reference.ts) dentro de él:

 interface JQuery { carousel(); } 

Le dirá al comstackdor de ts que hay un carrusel de metodo () que se implementará más tarde. (en el browser, por el file carousel.js)

Si tienes un problema similar con otra lib que con un carrusel, aquí encontrarás un montón de ejemplos de la interfaz: https://github.com/DefinitelyTyped/DefinitelyTyped

Puede importar files JS al declarar un module ambiental para cada biblioteca que necesite. Puede tener un file ambient.d.ts donde almacene todas las declaraciones de modules ambientales (es decir, para bibliotecas de JavaScript que le gustaría importar, pero para las que no tiene las definiciones de tipo)

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

cualquier otro file * .ts que necesite 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); 

Al final, cambié mi código para usar el "InjectionToken". Como se describe aquí: Use jQuery en Angular / Typescript sin una definición de tipo

Simplemente puede inyectar la instancia global de jQuery y usarla. Para esto no necesitarás ninguna definición de tipo o tipificación.

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

Cuando está configurado correctamente en su 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 { } 

Puede comenzar a usarlo en sus componentes:

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

Después del lanzamiento final de Angular, (para jquery.js y bootstrap.js)

1) agregue los siguientes packages npm

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

2) en tsconfig.json agregue las siguientes inputs en la matriz de types ,

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

Y ahora eres bueno para ir ahora.

Error de método de carrusel de Jquery en Angular2 / typescript