在 package.json 中反应 18 种打字稿类型

Question

我正在尝试将我的 React 17 升级到 18

"@types/react": "???????",
"@types/react-dom": "????????",
"react": "^18.0.0",
"react-dom": "^18.0.0",

我应该在 @types/react 和 @types/react-dom 中输入什么？
谢谢

Answer 1

在我写这篇文章时，React 18 类型似乎还没有完成（参见 tweet from maintainer）。 React 18 类型有以前的“@next”版本，但它们与 React 18 版本不匹配，可能不应该使用。请耐心等待，他们可能会在未来几天 finished/released。

Answer 2

当 React 团队致力于新类型的发布时，如果你想测试它，你可以保留旧的 "@types/react": "^17.0.40" 和 "@types/react-dom": "^17.0.13" 类型版本，并在 index.tsx 之后将 react 和 react-dom 更新到版本 18.0.0 您需要首先从 react-dom/client 导入 ReactDOM 然后使用 id=root 从元素创建根元素createRoot 然后使用 .render 在创建的根元素中呈现 <App/> 组件的内容，如下所示：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

let root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
);

Answer 3

我使用 Create React App 生成了一个新的 TypeScript 项目并查看了依赖项，因为我删除了删除 @types/react 和 @types/react-[= 的建议26=]。那可不好玩。

我最终安装了这些类型：

"@types/react": "^17.0.43",
"@types/react-dom": "^17.0.14",

然后我可以使用以下命令将我的应用程序安装到 index.tsx：

import React from 'react';
import { createRoot } from 'react-dom/client';
....
const container = document.getElementById('root');
// OH BOY, container can be null but createRoot can't handle this...
if (!container) {
   throw "Can't instantiate";
}
const root = createRoot(container);
root.render(
   <React.StrictMode>
   <App />
   </React.StrictMode>
);

是的，当前的打字稿类型有一个问题，它可能会收到一个空值，你必须用 if / throw 检查来保护它......或者做一个 ts-ignore.

我希望这个问题能以某种方式得到解决。但无论如何，现在是凌晨 1 点，我终于能够使用这个 hack 让我的应用程序与 React 18 和 Typescript 一起工作。

Answer 4

看起来像 @types/react 和 @types/react-dom are now on v18。以下是我的升级方式：

卸载这两个包
升级到 React 18
yarn install -D @types/react @types/react-dom，现在自动使用 v18 类型。（或npm install --save-dev ...）

我确定有一种方法不需要您先通过 yarn upgrade 进行卸载，但由于某些原因它对我不起作用。

在 package.json 中反应 18 种打字稿类型

react 18 typescript types in package.json

react-18