Question

我正在尝试集成一个没有公开类型定义的JavaScript库（bricks.js）。

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

export default (config) => {

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

我无法弄清楚如何为此函数正确创建类型定义（.d.ts）;当我导入时，tsc编译，我得到未定义或tsc将无法编译。

对于此实例.d.ts编译：

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

但如果我像这样导入，在我的AngularJs 2组件中：

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

然后Bricks为undefined，因此会抛出错误： - ）。

我不知道如何为该库构建.d.ts;此外，库是使用Babel编译的，我怀疑Babel使用箭头函数默认导出...

Answer 1

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

bricks.js库是使用ES6模块（src文件夹）定义的，但也是使用Babel构建的。

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

所以基本上我从那里得到两个选择：

使用src文件夹中的ES6 bricks.js。这意味着使用现代的typescript语法加载ES6模块，然后在Systemjs配置中声明一个转换器，以便它可以正确加载库及其依赖项。
或使用dist文件夹中的Babel转换bricks.min.js。我必须使用非模块实体语法。

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

我使用了第二个解决方案，以避免从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 }
    ]
});

Answer 2

您可以使用LEFT JOIN

导入代码

您可以使用

之类的内容来定义它

JOIN

TypeScript类型定义;导出Angular2

2 个答案: