2017-08-15 1 views
0

J'ai essayé de suivre la configuration sur le TypeScript page, mais j'ai quelques erreurs. Voici mes fichiers:TypeScript avec les typages React ne compileront pas

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" 
    } 

Mes fichiers sont tsx copier/coller de la page liée ci-dessus.

La première erreur que j'obtiens est avec 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")); 
| 

cette erreur disparaît si je passe le chargeur à ts-loader, mais je voudrais encore savoir si je fais quelque chose de mal.

La deuxième erreur concerne la définition de type @types\react. Cela me jette tous les types d'erreurs. Mais le premier de la liste est:

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 

Ceci m'empêche de construire ma solution. J'utilise VS2017. Toute aide est appréciée.

Répondre

0

Je ne sais pas si c'est la bonne réponse, mais cela fonctionne et je n'ai pas perdu les dactylos. Afin de le réparer, j'ai retiré les "@types/react": "latest" et "@types/react-dom": "latest" des packages.json