TypeScript-Typdefinition; Export-Standard für die Verwendung externer JavaScript-Bibliothek in Angular2

Question

Ich versuche, eine JavaScript-Bibliothek (bricks.js) zu integrieren, die keine öffentlich verfügbare Typdefinition hat.

Im Grunde, was die Bibliothek exportiert ist so etwas wie folgt aus:

export default (config) => { 

    const instance = SomeConstructorFunction(config); 
    return instance; 
} 

ich kann nicht herausfinden, wie man richtig eine Typdefinition (.d.ts) für diese Funktion erstellen; entweder TSC kompiliert, wenn ich importiere, ich werde nicht definiert oder TSC wird nicht kompilieren.

für diese Instanz .d.ts kompiliert:

declare module 'bricks.js' { 
    export class Bricks { 
     constructor(config: any); 
     pack(); // some function available on the instance 
    } 
} 

Aber wenn ich so zu importieren, in meinem AngularJS 2 Komponente:

import { Bricks } from 'bricks.js'; 
this.bricks = new Bricks({//some config here}); 

Dann Bricks ist undefined, daher wird ein Fehler :-) geworfen .

Ich bekomme nicht genau, wie man ein .d.ts für diese Bibliothek baut; Weiterhin wird die Bibliothek mit Babel zusammengestellt, und ich vermute, Babel macht etwas mit Pfeil Funktion Standard Exporten ...

Answer 1

Ok, fand meinen Weg durch diesen kleinen Alptraum ...

Die bricks.js Bibliothek definiert ist Verwendung von ES6-Modulen (src-Ordner), wird aber auch mit Babel erstellt.

ich Systemjs bin mit meiner Angular2 Projektabhängigkeit zu laden,

Also im Grunde habe ich zwei Möglichkeiten bekomme von dort:

• verwenden, um die ES6 bricks.js aus den src-Ordnern. Das bedeutet, dass Sie zum Laden von ES6-Modulen die moderne Typoskriptsyntax verwenden und dann einen Transpiler in der Systemjs-Konfiguration deklarieren, damit die Bibliothek und ihre Abhängigkeiten korrekt geladen werden können.

• oder verwenden Sie das Babel transpiled bricks.min.js aus dem Ordner dist. Ich muss die Nicht-Modul-Entity-Syntax verwenden.

Siehe https://stackoverflow.com/a/29598404/254439

ich mit der zweiten Lösung ging transpilation von Systemjs zu vermeiden.

So, hier ist das, was ich getan habe:

.index.d.ts

declare module 'bricks.js' { 
    interface Bricks { 
     pack(); 
    } 

    function bricksFactory(config:any): Bricks 

    export = bricksFactory; 

}

systemjs.config.js

... 
var map = { 
    ... 
    'bricks.js':     'node_modules/bricks.js/dist/' 
    ... 
} 
... 
var packages = { 
    ... 
    'bricks.js':     { main: 'bricks.min.js', defaultExtension: 'js'} 
}; 

my.component.ts

import bricksFactory = require('bricks.js'); 

this.bricksInstance = Bricks({ 
    container: '.mycontainer', 
    packed: 'data-packed', 
    sizes: [ 
     { columns: 2, gutter: 10 }, 
     { mq: '768px', columns: 3, gutter: 25 }, 
     { mq: '1024px', columns: 4, gutter: 50 } 
    ] 
}); 

Answer 2

können Sie den Code importieren import * as Bricks from 'bricks.js';

Verwendung Sie können es definieren so etwas wie

mit

declare module "Bricks" { 
    function loadConfig(config): SomeConstructorFunction; 
    var _tmp = loadConfig; 
    export = _tmp; 
}