如何将基本 Javascript 项目转换为 React-Typescript 兼容项目答案

【问题标题】：How to convert basic Javascript project to React-Typescript compatible project如何将基本 Javascript 项目转换为 React-Typescript 兼容项目
【发布时间】：2021-04-21 16:04:24
【问题描述】：

我正在尝试将一个基本的 TS 应用程序转换为一个 React Typscript 应用程序。

我的 html 看起来像这样：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8" />
  </head>
  <body>
    <p>This is the entry point to my app</p>
  </body>
</html>

我正在使用 webpack，所以我的 index.js 是基本的：

import './index.css';
import './components/my-component';

到目前为止，我的主要尝试是模仿 creat-react-app 并添加一个文件

import React from 'react';

const MyComponent: React.FunctionComponent = (): JSX.Element => {
  return <div> Hello !!! </div>;
};
export default MyComponent;

并像这样更改 index.html 正文部分：

  <body>
    <div id="root"></div>
  </body>

并将index.ts 更改为index.tsx，如下所示：

import './index.css';

import React from 'react';
import ReactDOM from 'react-dom';

import MyComponent from './components/my-component';

ReactDOM.render(
  <React.StrictMode>
    <MyComponent />
  </React.StrictMode>,
  document.querySelector('#root'),
);

它编译正常，但呈现一个空页面。我得到的错误是： TypeError: undefined is not an object (evaluating 'react_dom_1.default.render') 专门针对<React.StrictMode>。我正在使用"react": "^17.0.1"

我还看到由于某种原因它没有拾取我的组件

当我检查页面时，我可以看到以下源代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="root"></div>
  <script type="text/javascript" src="/chunks/app.js"></script></body>
</html>

有什么想法吗？

【问题讨论】：

标签： javascript reactjs typescript webpack create-react-app

【解决方案1】：

Babel 的 ES 模块版本和实际的 ES 模块规范（TypeScript 更紧密地遵循）并不总是一致的。对于没有默认导出的模块，包括 React 和 ReactDOM，您需要以这种方式导入它们：

import * as React from 'react'
import * as ReactDOM from 'react-dom'

这会以这些名称从 React 和 ReactDOM 模块导入所有导出，而不是像 Babel 允许的那样假装它们具有默认导出。

在很多情况下，通常包括简单的功能组件，您也不需要指定返回类型，因为它可以很容易地推断出来。

【讨论】：

您也可以在tsconfig.json 中启用esModuleInterop，然后您就可以执行import React from 'react'
@MattBrowne 添加esModuleInterop 为我修复了它！