Question

我正在使用Ionic2 / Angular2打字稿项目中的图形库C3。我通过C3安装了npm，通过tsd安装了类型定义。

我已经导入到我自己的ts文件中，如下所示..

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import * as C3 from 'c3';
import * as D3 from 'd3';

@Component({
   templateUrl: 'build/pages/graphs-page/graphs-page.html'
 ....
})

一切都很好。我可以看到C3（和相关的D3）的类型，当我运行时，一切似乎都有效。

但是，当应用程序构建时（当我运行ionic serve时），我总是得到以下打字稿编译错误......

TypeScript error: D:/dev/ionic2/testcomonents/app/pages/graphs-page/graphs-page.ts(3,21): Error TS2307: Cannot find module 'c3'.
TypeScript error: D:/dev/ionic2/testcomonents/app/pages/graphs-page/graphs-page.ts(4,21): Error TS2307: Cannot find module 'd3'.

有没有人知道为什么我在构建时遇到这些错误，当我在IDE中没有错误时（我正在使用vscode），并且一切似乎都正常工作？

[编辑]

我已经安装了typescipt 2并使用--traceResolution标志运行。我可以看到tsc似乎只在node_modules的不同级别下查看，并且永远不会在typings文件夹下查看，这是vscode正在查看的位置。

如果c3.js源位于node_modules / c3文件夹下，则更加令人困惑（c）。我没有专门添加对c3.js的任何引用，但图表显示了。

tsconfig.json中的设置为

{
   "compilerOptions": {
   "target": "es5",
   "module": "commonjs",
   "emitDecoratorMetadata": true,
   "experimentalDecorators": true
 },

"filesGlob": [
   "**/*.ts",
   "!node_modules/**/*"
 ],
 "exclude": [
   "node_modules",
   "typings/main",
   "typings/main.d.ts"
  ],
 "compileOnSave": false,
 "atom": {
   "rewriteTsconfig": false
 }
}

我在上面的tsconfig.json中尝试了各种编辑，但是无法在typings文件夹中查看。

所以现在我的问题变成了

如何在Typings文件夹中查看Typscript？
如何将位于node_modules \ c3 \ c3.js的实际c3.js文件包含在Ionic包中（因为我没有在任何地方添加对它的引用）

Answer 1

我想我现在知道答案，但如果我不对，请纠正我！

查看Ionic文件D:\dev\ionic2\testcomponents\node_modules\ionic-gulp-browserify-typescript\index.js，有以下src属性

var defaultOptions = {
   watch: false,
   src: ['./app/app.ts', './typings/main.d.ts'],

所以如果我将以下内容添加到main.d.ts

/// <reference path="globals/c3/index.d.ts" />
/// <reference path="globals/d3/index.d.ts" />

错误消失了。

如果我运行tsc --traceResolution我仍然会看到错误，但我的猜测是从命令行运行tsc不包括查看上述Ionic脚本或main.d.ts。

要在使用tsc --traceResolution时摆脱错误，我尝试将以下内容添加到文件D:\dev\ionic2\testcomponents\node_modules\c3\package.json

"typings": "../../typings/globals/c3/index.d.ts",

然后对d3做同样的事情。但是，当我运行Ionic构建时，这会导致以下错误

TypeScript error: d:/dev/ionic2/testcomponents/app/pages/graphs-page/graphs-page.ts(3,21): Error TS2656: Exported external package
typings file 'd:/dev/ionic2/testcomponents/typings/globals/c3/index.d.ts' is     not a module. Please contact the package author to update the package  definition.

所以，我认为在Ionic上下文中，正确的做法是将///路径添加到main.d.ts文件中。

我遇到的另一个问题，即如何包含c3.js等文件，这是Browserfity / gulp构建的所有部分，这将检查nodes_modules文件夹下的所有内容。它们都有packeage.json文件，对于c3，我们有"main": "c3.js"行。

在导入C3和D3时，Typescript编译错误

1 个答案: