TypeScript类型定义；导出默认值以在Angular2中使用外部JavaScript库 [英] TypeScript type definition; export default for using external JavaScript library in Angular2

问题描述

我正在尝试集成一个没有公开可用的JavaScript库( bricks.js ).类型定义.

I'm trying to integrate a JavaScript library (bricks.js) that has no publicly available type definition.

基本上，库导出的内容是这样的:

Basically, what the library is exporting is something like this:

export default (config) => {

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

我无法弄清楚如何为此函数正确创建类型定义(.d.ts)；导入时tsc会编译，我会得到未定义，否则tsc不会编译.

I cannot figure out how to correctly create a type definition (.d.ts) for this function; either tsc compiles when I import, I get undefined or tsc won't compile.

对于此实例，.d.ts进行编译:

For this instance .d.ts compiles:

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

但是，如果我这样导入，则在AngularJs 2组件内部:

But if I import like this, inside my AngularJs 2 component:

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

然后Bricks是undefined，因此会引发错误:-).

Then Bricks is undefined, hence an error is thrown :-).

我不知道该如何为该库构建.d.ts的确切方法；此外，该库是使用Babel编译的，我怀疑Babel会使用箭头功能默认导出来执行某些操作...

I don't get exactly how to build a .d.ts for that library; furthermore, the library is compiled using Babel, and I suspect Babel does something with arrow function default exports...

推荐答案

好吧，找到了解决这个小噩梦的方法...

Ok, found my way through this little nightmare...

bricks.js库使用ES6模块(src文件夹)定义，但也使用Babel构建.

The bricks.js library is defined using ES6 modules (src folder) but is also built using Babel.

我正在使用Systemjs加载我的Angular2项目依赖项，

I'm using Systemjs to load my Angular2 project dependencies,

所以基本上我有两种选择:

So basically I've got two options from there:

• 使用src文件夹中的ES6 bricks.js.这意味着使用现代的Typescript语法加载ES6模块，然后在Systemjs配置中声明一个Transpiler，以便它可以正确加载库及其依赖项.

• use the ES6 bricks.js from the src folder. That means using the modern typescript syntax for loading ES6 modules and then declare a transpiler in the Systemjs config so that it can load the library and its dependencies correctly.

或使用dist文件夹中的Babel转译的bricks.min.js.我必须使用非模块实体语法.

or use the Babel transpiled bricks.min.js from the dist folder. I have to use the non-module entity syntax.

请参见 https://stackoverflow.com/a/29598404/254439

我采用了第二种解决方案，以避免从Systemjs进行编译.

I went with the second solution to avoid transpilation from Systemjs.

这就是我所做的:

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

这篇关于TypeScript类型定义；导出默认值以在Angular2中使用外部JavaScript库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！