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'的js实现（显然没有任何chart.js ，原始库导入脚本标记）。

SystemJS的配置与角度教程相同：

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);

注意：这假设图表功能在全局上下文中可用。

您不必为所有内容声明自己的.d.ts文件，也有可能对您有用的工具。与typings或tsd一样。

Answer 2

您正在使用值位置中的chart.js导出，例如不仅因为它的类型，所以TypeScript在转换模块时将其作为依赖项发出。问题是chart.js不适用于加载程序。我建议您在地图或包中的SystemJS配置中声明它，例如'path': 'path/to/chart.js'，然后删除脚本标记。

如果由于某种原因需要使用脚本标记，请将类型声明文件更改为

export interface Chart {
  new (ctx: any);
  Doughnut(data: any, options: any): Function;
}

请注意，您还可以配置SystemJS以通过cdn或其他任何方式加载chart.js.

就个人而言，我会避免脚本标记并将其作为适当的模块加载。您可能会发现这有用： http://www.chartjs.org/docs/#getting-started-installation

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

2 个答案: