webpack TS2304 无法找到名称为 'Map'、'Set'、'Promise'的内容。

Question

我有以下的webpack.config.js

var path = require("path");
var webpack = require('webpack');

module.exports = {
  entry: {
    'ng2-auto-complete': path.join(__dirname, 'src', 'index.ts')
  },
  resolve: {
    extensions: ['', '.ts', '.js', '.json', '.css', '.html']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: "[name].umd.js",
    library: ["[name]"],
    libraryTarget: "umd"
  },
  externals: [
    /^rxjs\//,    //.... any other way? rx.umd.min.js does work?
    /^@angular\//
  ],
  devtool: 'source-map',
  module: {
    loaders: [
      { // Support for .ts files.
        test: /\.ts$/,
        loaders: ['ts', 'angular2-template-loader'],
        exclude: [/test/, /node_modules\/(?!(ng2-.+))/]
      }
    ]
  }
};

以及以下的tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitHelpers": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "pretty": true,
    "allowUnreachableCode": true,
    "allowUnusedLabels": true,
    "noImplicitAny": false,
    "noImplicitReturns": false,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": false,
    "allowSyntheticDefaultImports": true,
    "suppressExcessPropertyErrors": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "dist",
    "baseUrl": "src"
  },
  "files": [
    "src/index.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "buildOnSave": false
}

当我运行以下命令tsc时，一切都正常。

ng2-auto-complete (master)$ tsc --declaration
ng2-auto-complete (master)$ 

当我运行webpack命令时，它显示了TypeScript编译错误。

ng2-auto-complete (master)$ webpack
ts-loader: Using typescript@2.0.0 and /Users/allen/github/ng2-auto-complete/tsconfig.json
Hash: bd6c50e4b9732c3ffa9d
Version: webpack 1.13.2
Time: 5041ms
                       Asset     Size  Chunks             Chunk Names
    ng2-auto-complete.umd.js  24.4 kB       0  [emitted]  ng2-auto-complete
ng2-auto-complete.umd.js.map  28.4 kB       0  [emitted]  ng2-auto-complete
    + 11 hidden modules

ERROR in /Users/allen/github/ng2-auto-complete/node_modules/@angular/platform-browser/src/dom/dom_renderer.d.ts
(18,37): error TS2304: Cannot find name 'Map'.

ERROR in /Users/allen/github/ng2-auto-complete/node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts
(96,42): error TS2304: Cannot find name 'Map'.

ERROR in /Users/allen/github/ng2-auto-complete/node_modules/@angular/platform-browser/src/web_workers/worker/location_providers.d.ts
(21,86): error TS2304: Cannot find name 'Promise'.
...
ng2-auto-complete (master)$ 

我不知道在webpack和typescript编译过程中缺少了什么。

tsconfig.json中已排除了node_modules

"exclude": [ "node_modules" ]，

而类型定义文件是在node_modules中。

  "devDependencies": {
    "@types/core-js": "^0.9.32",
    "@types/node": "^6.0.31"

我也尝试使用typings.json和typings目录，但没有成功。

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160815222444"
  }
}

顺便提一下，版本问题

$ node --version
v5.7.1
$ npm --version
3.6.0
$ tsc --version
Version 2.0.0

如何使用 webpack 命令消除 TS2304 错误？

- allenhwkim

---

ES6库是唯一需要使其工作的库。如果您在使用Node运行TypeScript时遇到相同的问题 - cnexans

Answer 1

我将其添加到tsconfig.json中，似乎可以正常工作且没有任何错误。

  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "es6", "dom"],  <--- this
    ...
  }

我不确定lib是否适用于Typescript 2.0函数，但发现有几个库可用

从typescript配置模式中可以看到（注意es2015.collection）

 "lib": {
      "description": "Specify library file to be included in the compilation. Requires TypeScript version 2.0 or later.",
      "type": "array",
      "items": {
        "type": "string",
        "enum": [ "es5", "es6", "es2015", "es7", "es2016", "es2017", "dom", "webworker", "scripthost", "es2015.core", "es2015.collection", "es2015.generator", "es2015.iterable",
                    "es2015.promise", "es2015.proxy", "es2015.reflect", "es2015.symbol", "es2015.symbol.wellknown", "es2016.array.include", "es2017.object", "es2017.sharedmemory" ]
      }
    }

这解决了编译错误，但我仍然想知道为什么tsc命令可以正常工作而没有任何错误，但webpack不行。 tsc通过tsconfig.json搜索所有可能的库而不使用lib？

- allenhwkim

---

请将您的答案选择为首选解决方案。 - jsaddwater

谢谢，我是搜索专家。你的答案是最好的。 - user6600549

Answer 2

Map、Set和Promise是ES6的功能。
在你的tsconfig.json中使用了：

"target": "es5" 

这会导致编译器使用普通的 es5 lib.d.ts，该文件中缺少上述类型的定义。

你想要使用lib.es6.d.ts：

"target": "es6" 

- Nitzan Tomer

---

不是所有的浏览器都支持最新的ES6特性。但是，如果你想使用像Promise和Map这样的ES6特性，那么你需要针对ES6进行目标设置或从libe.es6.d.ts中复制所需的定义。 - Nitzan Tomer

如果我们想要兼容IE11，那么es6中的对象；Map、Promise等应该转换为es5对象。因此，目标应该是es5而不是es6。我说得对吗？ - allenhwkim

不是“目标”拾取库，而是“lib”应为这些对象包含该库。请查看@allenhwkim的答案。那解决了问题，也是正确的答案。 - Rakesh Kumar Cherukuri

@RakeshKumarCherukuri 不同的目标有不同的库。如果你选择目标为 es6，你将会得到 es6 库。 - Nitzan Tomer

我的观点是，“target”是用来指定输出类型（在OP的情况下为es5），而“lib”则是用来指定webpack编译源代码所使用的库。你的回答/评论似乎让人误以为“target”是用来指定库的。 - Rakesh Kumar Cherukuri

Answer 3

只需添加：

 "lib": ["es6"] // means at least ES6

不要更改目标(Target)。Target用于告诉Typescript编译您的.ts文件到哪个版本的ECMAScript中。当然，如果您的应用程序将在支持该版本ECMAScript的浏览器中运行，您可以更改它。

例如，我使用"target": "es5"和"lib": ["es6"]。

---

另一个原因可能是：

您的.ts文件不在"rootDir": "./YourFolder"下。

- Legends

---

请注意，lib选项默认情况下有多个库；因此，上面的示例将删除其他默认库，例如DOM和ScriptHost（以及ES6目标的DOM.Iterable）。 - Robert K. Bell

Answer 4

如果你在想为什么这些解决方法都不适用于你，请记住--如果你在命令行或package.json中指定要编译的文件，tsc将不会读取你的tsconfig.json文件，因此没有效果。相反，在你的tsconfig.json中指定"files"和"outDir"，其中一个"lib"解决方法可能适用于你。然后只需使用以下命令进行编译：tsc --sourcemaps。

- user1618323

---

非常好。非常感谢。 - user3230660

赢家，在阅读了所有内容后，这是最后一篇帖子，也是让我恍然大悟并解决问题的帖子。谢谢。 - Adam Plocher

对于 TypeScript 3.7，此选项看起来像 --sourceMap。 - Denis Savenko

Answer 5

tsc index.ts --lib "es6"

如果在 tsconfig.json 中添加库无法正常工作，则使用上述命令行选项。

- phray2002

Answer 6

我不得不从npm安装core-js类型定义来解决这个问题。

npm install @types/core-js

说明:
@types npm包的目标是通过npm获得类型定义。 使用这些类型定义是 TypeScript 2.0 特性。

@types 取代了当前工具，如 typings 和 tsd，但是这些工具在一段时间内仍将持续受到支持。

- hannes neukermans

Answer 7

因为对原帖已经有答案了，所以我想补充一下为什么我的问题得到了解决。我的情况略有不同，我没有使用WebPack，在尝试使用tsc时出现了这些错误。其他人给出的答案（添加“es6”到lib）对我来说没有解决问题。对我而言，问题在于我在机器上安装了v9.11.1的node，但我使用npm获取了“@types/node”，它获取了最新版本的v10+。一旦我卸载了那个node typing并安装了一个特定的v9 node typing文件，这个问题就得到了解决。

- LeftOnTheMoon

Answer 8

https://dev59.com/KlkS5IYBdhLWcg3w05eT#44800490

npm install typings -g
typings install

在npm 5.6.0版本中，已弃用该命令！请改用npm install @types/core-js命令进行操作。

- lyrio

Answer 9

我正在使用node.js v10.16.3。 对我来说，问题是typescript编译器忽略我的tsconfig.json文件。

以下是三种解决方法：

1. 安装ts-node并使用它来编译和运行文件
2. 在编译文件时执行tsc filename.ts --lib "es6", "dom"
3. 安装@types/node，这将允许您无错误地运行tsc filename.ts。

- Andrew Odiit

Answer 10

要解决此错误，请在tsconfig.json文件中更改以下属性。

将"Original Answer"翻译成中文是"最初的回答"。

"lib": [
      "es2018",
      "dom",
      "es5", 
      "es6"
    ],
"module": "es2015",
"target": "es6"

然后在终端中运行以下命令。原始答案翻译成“最初的回答”。

npm install @types/es6-shim

最初的回答。

错误已解决。

- Minnie