typescript - 找不到模块 'chart.js'

Question

我有一个运行 webpack、typescript 和 gulp 的网络应用程序。我想使用 chart.js 库并且我已经安装了 chart.js npm 包。我试图在其中一个 JS 文件上定义 chart.js，我得到了这个:error TS2307: Cannot find module 'chart.js'

我的 JS 文件如下所示:

import Chart = require( "chart.js" );

配置文件:

{
  "compilerOptions": {
    "module": "commonjs"
  },
  "files": [
    "typings/tsd.d.ts"
  ]
}

重要提示: 注意到 chart.js 定义文件没有正确的模块声明。左边是会计 JS 库，它清楚地定义了模块并且可以正常工作。我猜这就是问题所在。如何使用声明的变量或将其导入另一个 JS 文件？

Answer 1

我认为您的设置中存在两个问题，您遇到的错误只是第一个，解决后您将需要设置 webpack 以从 TypeScript 源代码中识别您的依赖项。

考虑到您已经正确安装了模块及其类型...

1 - 获取 tsc 来编译你的图表测试

首先，在您的 tsconfig.json 中您应该省略"file"指令，以便编译器自动读取所有相关文件(包括类型)。然后只需为每个不需要编译的文件夹(例如“node_modules”)添加一个“exclude”条目。所以你的 tsconfig.json 应该看起来像这样:

{
  "compilerOptions": {
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

正如@vintem 在下面的答案中发布的那样，您不需要 require() chart.js 作为一个模块，它是一个最初设计为以老式方式从浏览器使用的包，因此一旦加载库，它就会自动进入全局范围。

2 - 配置 webpack 与 tsc 一起工作

在名为 webpack.config.js 的项目根目录中为您的 webpack 构建创建一个配置文件以这样的内容作为内容:

module.exports = {
  entry: './app.ts',
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
    loaders: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/, loader: 'ts-loader' }
    ]
  }
}

这使得 webpack 使用 ts-loader 理解 TypeScript 代码中使用的依赖项，你可以安装它:

npm install ts-loader --save-dev

如果您愿意，可以进行这些配置 directly in your gulp file .

---

更新 1

当您从全局范围使用时，好吧......您只需使用它，就像下面@vintem 的回答一样。但是，您需要删除自己编写定义的尝试，只需确保 /// ref下载的图表定义在文件中 typings/tsd.d.ts ，否则您将覆盖/混合这些定义并造成大困惑... tsc您会自动查看打字文件夹并为您找到所有内容。

如果您收到“找不到图表模块”之类的错误，这可能意味着您仍在尝试在代码中的某处导入该模块。您需要尝试直接将其与 new Chart(...) 一起使用并且可能会收到类似“找不到图表 类”的错误，但这是一个完全不同的历史。

---

祝你好运，请尝试以上步骤，如果有任何进展，请告诉我。