TypeScript与React typings不会编译

问题描述：

我试着按照TypeScript page上的设置，但我得到了一些错误。在这里我的文件：TypeScript与React typings不会编译

tsconfig：

{ 
    "compilerOptions": { 
    "outDir": "../scripts/", 
    "noImplicitAny": false, 
    "noEmitOnError": true, 
    "removeComments": true, 
    "sourceMap": true, 
    "target": "es5", 
    "jsx": "react", 
    "lib": [ 
     "es6", 
     "es5", 
     "dom" 
    ] 
    }, 
    "exclude": [ 
    "node_modules", 
    "wwwroot", 
    "scripts" 
    ] 
}

的package.json：

{ 
    "version": "1.0.0", 
    "name": "asp.net", 
    "private": true, 
    "devDependencies": { 
    "@types/react": "latest", 
    "@types/react-dom": "latest", 
    "typescript": "2.4.2", 
    "awesome-typescript-loader": "3.2.3", 
    "source-map-loader": "0.2.1", 
    "gulp": "3.9.1", 
    "del": "2.2.2", 
    "gulp-concat": "2.6.1", 
    "gulp-sourcemaps": "2.6.0", 
    "gulp-uglify": "2.1.2", 
    "@types/jquery": "2.0.41", 
    "pump": "1.0.2", 
    "@types/bootstrap": "3.3.33", 
    "gulp-typescript": "3.1.7", 
    "@types/knockout": "3.4.41", 
    "ts-loader": "2.3.2", 
    "webpack": "3.5.4", 
    "webpack-stream": "4.0.0" 
    }, 
    "dependencies": { 
    "react": "latest", 
    "react-dom": "latest" 
    } 
}

webpack.config.js：

module.exports = { 
    entry: "./typescripts/index.tsx", 
    output: { 
     filename: "bundle.js", 
     path: __dirname + "/scripts" 
    }, 
    devtool: "source-map",  
    resolve: { 
     extensions: [".ts", ".tsx", ".js", ".json"] 
    },  
    module: { 
     rules: [ 
      { test: /\.tsx?$/, loader: "awesome-typescript-loader" }, 
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" } 
     ] 
    }, 
    externals: { 
     "react": "React", 
     "react-dom": "ReactDOM" 
    }

我TSX文件复制/粘贴上面链接的页面。

我得到的第一个错误是awesome-typescript-loader。

ERROR in ./typescripts/index.tsx 
Module parse failed: c:\Documents\Visual Studio 2017\Projects\DevSln\WebApplication4\node_modules\awesome-typescript-loader\dist\entry.js!C:\Documents\Visual Studio 2017\Projects\DevSln\WebApplication4\typescripts\index.tsx Unexpected token (6:16) 
You may need an appropriate loader to handle this file type. 
| var ReactDOM = require("react-dom"); 
| var Hello = require("./hello"); 
| ReactDOM.render(<Hello.Hello compiler="typescript" framework="React"/>, document.getElementById("example")); 
|

这个错误消失，如果我切换装载机ts-loader，但我还是想知道如果我做错了什么。

第二个错误与@types\react类型定义有关。这是抛出我所有类型的错误。但列表中的第一个是：

Severity Code Description Project File Line Suppression State 
Error  Build:Module '"C:/Documents/Visual Studio 2017/Projects/DevSln/WebApplication4/node_modules/@types/react/index"' has no exported member 'DOMAttributes'. WebApplication4 C:\Documents\Visual Studio 2017\Projects\DevSln\WebApplication4\node_modules\@types\react-dom\index.d.ts 15

这阻止了我构建我的解决方案。我正在使用VS2017。任何帮助表示赞赏。

答

不知道它的正确答案，但它的工作原理，我没有失去打字。为了解决这个问题，我从packages.json中删除了"@types/react": "latest" 和"@types/react-dom": "latest"

TypeScript与React typings不会编译

相关推荐