typescript - 用于外部 Javascript 库的 TypeScript 导出声明的 SystemJS 配置

Question

我是 Angular2 和 Typescript 的新手。我想找到一种优雅地使用外部 js 库的方法:我知道，我可以使用:

declare var somelibrary: any;
somelibrary.doAnithing();

但我想打字，所以我读了here用于 *.d.ts

所以我创建了一个模块 chart.d.ts :

export declare class Chart {
    constructor (ctx: any);

    Doughnut(data: any, options: any): Function;
}

(我也试试:)

export declare module 'chart' {
    export class Chart {
        constructor (ctx: any);

        Doughnut(data: any, options: any): Function;
    }
}

并引用它，尝试多种方式:

// version 1
import chartFactory = require('../chart');
// version2
import { Chart } from '../chart';

并使用它:

// version 1 usage    
new  chartFactory.Chart(ctx).Doughnut(this.chart1, {responsive : true});

或者对于第二次导入:

// version 2 usage
new  Chart(ctx).Doughnut(this.chart1, {responsive : true});

编译成功，但在运行时 SystemJS 尝试加载我的定义搜索 'path/to/chart.js' (显然没有任何 chart.js，原始库是用脚本标签导入的)。

SystemJS的配置和angular教程一样:

System.config({
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        }
    }
});

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

一些建议和解释？

我认为查找失败的原因是 "module": "system" 但问题是:如何在不与 SystemJS 解析冲突的情况下执行内部 d.ts？

Answer 1

我认为您正在寻找的是环境模块，您可以在手册中阅读更多相关信息 here .

您可以这样声明一个(在 chart.d.ts 中):

declare module "chart" {
    export class Chart {
        constructor (ctx: any);
        Doughnut(data: any, options: any): Function;
    }
}

你应该能够像这样使用它:

import {Chart} from "chart";

let c = new Chart(1);

注意:这假设 Chart 函数将在全局上下文中可用。

您不必为所有内容声明您自己的 .d.ts 文件，还有一些工具可能对您有所帮助。喜欢typings或 tsd .