Question

我正在尝试将一个正在运行的ReactJS应用程序转换为TypeScript，并且我遇到了一些问题，无法正常工作。

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")
);

控制台在<Application />

处抛出错误

当我导入这样的反应时，反应负载：

import * as React from "react";

但是，我想使用默认导出的import语句，因为我在所有现有组件中使用此导入语法导入React：

import React, {Component} from "react";

export default class Whatever extends Component<Props, State> {
...
}

我的tsconfig.json文件包含允许合成默认值的这一行：

"allowSyntheticDefaultImports": true

我的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;

不确定我在这里缺少什么......

Answer 1

在您的打字稿配置中，即tsconfig.json "esModuleInterop": true和"allowSyntheticDefaultImports": true。这将允许您导入符合es6模块规范的CommonJS模块。

Answer 2

模块解析有点复杂，因为Typescript与Babel和Webpack不同。如果您想了解更多信息，可以查看此评论：https://github.com/Microsoft/TypeScript/issues/5565#issuecomment-155216760

回到你的问题，allowSyntheticDefaultImports告诉Typescript允许从没有默认导出的模块进行默认导入，但发出的代码不会改变。因此，您需要将解析模块的责任转移到Webpack或Babel。

在Typescript配置文件中实现设置moduleResolution到ES6。管道将如下所示：

TS Code =＆gt; （TypescriptCompiler）=＆gt;带有ES6模块的JS代码=＆gt; （Webpack模块解析器）=＆gt; JS代码

Answer 3

改为设置"esModuleInterop": true。

React未定义（无法读取未定义的属性'createElement'）

3 个答案: