TypeScript 类型定义；在 Angular2 中使用外部 JavaScript 库的导出默认值

Question

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

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

export default (config) => {

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

我不知道如何正确地为这个函数创建类型定义（.d.ts）；要么 tsc 在我导入时编译，我得到 undefined 要么 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。这意味着使用现代打字稿语法加载 ES6 模块，然后在 Systemjs 配置中声明一个转译器，以便它可以正确加载库及其依赖项。
或使用从 dist 文件夹转译的 Babel bricks.min.js。我必须使用非模块实体语法。

见

我采用了第二种解决方案以避免从 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

您可以使用 import * as Bricks from 'bricks.js';

导入代码

您可以使用类似

的方式来定义它

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

TypeScript 类型定义；在 Angular2 中使用外部 JavaScript 库的导出默认值

TypeScript type definition; export default for using external JavaScript library in Angular2

typescript

angular

typing

arrow-functions