webpack TS2304找不到名称“地图”，“设置”，“承诺”

70

我有以下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命令时，它显示打字稿编译错误。

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编译缺少什么。

node_modules 已被排除在 tsconfig.json

“ exclude”：[“” node_modules“]，

类型定义在那里 node_modules

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

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

{
  "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错误？

typescript  webpack 
— Allenhwkim
source
ES6库是使其运行所需的唯一库。如果您在运行带有节点的打字机时遇到相同的问题
— cnexans

Answers:

120

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

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

我不确定lib是否支持Typescript 2.0功能，但发现有几个可用的库

从打字稿配置模式（请注意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搜索所有可能的库而不使用libby tsconfig.json？

— Allenhwkim
source
5
您应该选择答案作为首选解决方案
— jsaddwater
1
谢谢我，我是Search Guru。您的回答是最好的
— George C.
48

Map，Set并Promise有ES6特点。
在你tsconfig.json使用的是：

"target": "es5"

这导致编译器使用普通的es5lib.d.ts，而缺少上述类型的定义。

您要使用lib.es6.d.ts：

"target": "es6"
— 尼桑·托默尔
source
基于此处，目标应为“ es5”以生成es5代码。如果target是es6，它将仍然与较低的浏览器（例如“ IE11”）一起使用吗？
— allenhwkim
不，并非所有浏览器都支持最新的es6功能。但是，如果您想使用es6等功能Promise，Map则需要以es6为目标或从libe.es6.d.ts
— Nitzan Tomer
8
然后，如果我们想满足IE11， es6对象；映射Promise应当转换为es5对象。因此，目标应该是es5没有es6。我对吗？
— allenhwkim
4
选择库的不是“目标”，而是“库”应包括这些对象的库。看看@allenhwkim的答案。解决了这个问题，是正确的答案。
— Rakesh Kumar Cherukuri
1
我的观点是，“目标”是指定输出类型（在OP中为es5），“ lib”是指定webpack编译源代码时应使用的库。您的答案/评论似乎听起来像“目标”是指定库。
— Rakesh Kumar Cherukuri
40

只需添加： 

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

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

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

另一个原因可能是：

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

— 传说
source
1
请注意，默认情况下，该lib选项具有多个库。照原样DOM，上面的示例将删除其他默认库，例如和ScriptHost（DOM.Iterable对于ES6目标）。
— 罗伯特·贝尔
14

如果您想知道为什么这些修复都不起作用，请记住-如果您指定要在命令行或package.json上编译的文件，则tsc将不会读取tsconfig.json文件，因此无效。而是在tsconfig.json中指定“文件”和“ outDir”，“ lib”修复程序之一可能对您有用。然后只编译：

tsc --sourcemaps

— 用户名
source
高超。非常感谢。
— 山姆
获胜者，在阅读完所有内容后，这是最后一篇，并且是使我“ oh duh”并进行修复的文章。谢谢
— Adam Plocher '18
对于打字稿3.7，此选项如下所示--sourceMap
— Denis Savenko
10 
tsc index.ts --lib "es6"

如果添加lib在tsconfig.json中不起作用，请使用上述命令行选项

— phray2002
source
8

我必须从npm安装core-js类型来解决问题

npm install @types/core-js

说明：
@types npm软件包的目标是使用npm获得类型定义。使用这些类型定义是TypeScript 2.0功能。

@types取代现有的工具，如分型和TSD，虽然这些会持续一段时间的支持。

— 汉尼斯·纽克曼斯
source
4

由于直接回答OP的问题已经得到回答，因此我想我会添加一些固定的解决方案。我的情况略有不同，因为我没有使用WebPack，并且在尝试使用tsc时遇到了这些错误。其他人给的答案（在lib中添加“ es6”）对我来说并没有解决。对我来说，问题是我在计算机上安装了v9.11.1的节点，但是我使用npm来获取“ @ types / node”，该节点获得了最新的v10 +。一旦我卸载了该节点键入并安装了特定的v9节点键入文件，此问题就解决了。

— 月亮离开
source
2

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

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

之后，在终端中运行以下命令。

npm install @types/es6-shim

错误已解决。

— 米妮
source
2

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

三种解决方案对我有用：

  1. 安装ts-node并使用它来编译和运行文件
  2. 不要tsc filename.ts --lib "es6", "dom"在编译文件
  3. 安装后@types/node，您将可以正常运行tsc filename.ts。
— 安德鲁·奥迪特（Andrew Odiit）
source
1

在您的tsconfig.json中，只需将“ target”：“ es5”更改为“ target”：“ es6”

— 博帕尔·詹加
source
0

就我而言，我必须跑步：

npm install typings -g
typings install

那解决了我的问题。

— 克里斯蒂安
source
4
请注意，自TypeScript 2.0起不建议使用类型。请改用@types。
— 苏联熊猫
0

为了解决这个问题，您只需要像这样在ts文件中导入map方法：

import { map } from 'rxjs/operators';
— 大us
source
0

对我来说，解决方案是安装@types/node：

yarn add @types/node --dev

或者，如果您更喜欢npm：

npm install @types/node --dev

但是，我想如果您打算继续使用“ Map”，“ Set”或“ Promise”，则无论如何都应在“ lib”数组中包括“ es6” tsconfig.json。

— 保罗·拉兹万·伯格
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.