J'essaie de convertir une application ReactJS fonctionnelle en TypeScript, et j'ai eu des problèmes pour que quelque chose fonctionne correctement.
import React from "react";
import * as ReactDOM from "react-dom";
import Application from "./Application";
console.log(React); // undefined
ReactDOM.render(
<Application/>, window.document.getElementById("application-wrapper")
);
La console renvoie une erreur à <Application />
Quand j'importe, réagissez comme ça, réagissez aux charges:
import * as React from "react";
Cependant, je souhaite utiliser l'instruction d'importation en utilisant l'exportation par défaut, car j'importe React en utilisant cette syntaxe d'importation dans tous les composants existants:
import React, {Component} from "react";
export default class Whatever extends Component<Props, State> {
...
}
Mon fichier tsconfig.json
contient cette ligne permettant des valeurs synthétiques par défaut:
"allowSyntheticDefaultImports": true
Mon fichier webpack.config.js
:
let path = require("path");
let config = {
entry: "./src/main.tsx",
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
},
devtool: "source-map",
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"]
},
module: {
loaders: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/
}
]
}
};
module.exports = config;
Je ne sais pas ce qui me manque ici ...
3 réponses
La résolution de module est un peu compliquée car Typescript le fait différemment de Babel et Webpack. Si vous voulez en savoir plus, vous pouvez consulter ce commentaire: https: // github. com / Microsoft / TypeScript / issues / 5565 # issuecomment-155216760
Revenant à votre problème, allowSyntheticDefaultImports
dit à Typescript d'autoriser les importations par défaut à partir de modules sans exportation par défaut, mais le code émis ne change pas. Pour cette raison, vous devez transférer la responsabilité de la résolution des modules vers Webpack ou Babel.
Pour atteindre cet objectif, définissez moduleResolution
sur ES6
dans le fichier de configuration Typescript. Le pipeline ressemblera à ceci:
Code TS => (TypescriptCompiler) => Code JS avec modules ES6 => (Résolveur de modules Webpack) => Code JS
Dans votre configuration dactylographiée, c'est-à-dire tsconfig.json "esModuleInterop": true
et "allowSyntheticDefaultImports": true
. cela vous permettra d'importer des modules CommonJS conformément aux spécifications des modules es6.
Définissez "esModuleInterop": true
à la place.
Questions connexes
De nouvelles questions
reactjs
React est une bibliothèque JavaScript pour la création d'interfaces utilisateur. Il utilise un paradigme déclaratif basé sur les composants et vise à être à la fois efficace et flexible.