web-dev-qa-db-ja.com

webpack TS2304名前 'Map'、 'Set'、 'Promise'が見つかりません

私は次の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 [email protected] 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で除外されました

「除外」：[「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エラーを取り除くにはどうすればよいですか？

typescriptwebpack
62
allenhwkim

これを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を使用せずに、可能なすべてのライブラリを検索しますか？

107
allenhwkim

Map、Set、およびPromiseはES6機能です。
tsconfig.jsonで使用しているもの：

"target": "es5"

これにより、コンパイラは通常の es5 lib.d.ts を使用します。これには、上記のタイプの定義がありません。

lib.es6.d.ts を使用する場合：

"target": "es6"
40
Nitzan Tomer

何も変更しないでください：

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

ターゲットを変更しないでください。ターゲットを使用して、.tsファイルをコンパイルするECMAScriptのバージョンをTypeScriptに指示します。もちろん、アプリケーションを実行するブラウザがECMAScriptのそのバージョンをサポートする場合は、変更できます。

たとえば、"target": "es5"と"lib": ["es6"]を使用します。

別の理由は：

.tsファイルが"rootDir": "./YourFolder",の下にないこと

32
Legends
tsc index.ts --lib "es6"

上記のコマンドラインオプションを使用して、tsconfig.jsonでlibを追加できない場合

10
phray2002

これらの修正がどれも機能しないのか疑問に思っている場合コマンドラインまたはpackage.jsonでコンパイルするファイルを指定すると、tscはtsconfig.jsonファイルを読み取らないため、効果がありません。代わりに、tsconfig.jsonで「files」と「outDir」を指定すると、「lib」修正の1つがおそらく機能します。次に、次のみでコンパイルします。

tsc --sourcemaps

10
user1618323

この問題を解決するには、npmからcore-jsタイピングをインストールする必要がありました

npm install @types/core-js

説明：
@ types npmパッケージの目標は、npmで型定義を取得することです。これらのタイプ定義の使用は、TypeScript 2.機能です。

@types replacetypingsやtsdなどの現在のツールですが、これらはしばらくサポートされます。

5
hannes neukermans

OPへの直接の回答はすでに回答されているので、私はそれを修正したものを追加すると思いました。 WebPackを使用しておらず、TSCを使用しようとするとこれらのエラーが発生するという点で、私の状況はわずかに異なっていました。他の誰もが与えている答え（「es6」をlibに追加する）はそれを解決しませんでした。問題は、マシンにv9.11.1のノードがインストールされていたが、npmを使用して「@ types/node」を取得し、最新のv10 +を取得したことです。そのノードタイピングをアンインストールし、特定のv9ノードタイピングファイルをインストールすると、この問題は解決しました。

3
LeftOnTheMoon

https://stackoverflow.com/a/44800490/9690407

npm install typings -g typings install

npm 5.6.0で廃止されました！
代わりにnpm install @types/core-js構文を使用します。

3
lyrio

Tsconfig.jsonで、「target」：「es5」を「target」：「es6」に変更するだけです

1
bhoopal janga

私の場合、私は走らなければなりませんでした：
npm install typings -g typings install
それは私の問題を解決しました

0
Cristian