React 是目前最为流行的前端框架之一，而 TypeScript 则是一种流行的 JavaScript 的超集语言，它提供了类型检查、代码提示和更好的代码结构等功能。然而，在使用 TypeScript 开发 React 应用时，由于官方的 Create React App 还没有支持 TypeScript 热更新的官方方案，可能会带来一些不便。因此，react-app-rewire-typescript-hmr 这个 npm 包应运而生，它提供了一种方便的解决方案，使得我们可以在 TypeScript 中使用 React 的热更新功能。
本文将详细介绍 npm 包 react-app-rewire-typescript-hmr 的使用方法，并且会提供一些示例代码。
安装
在使用 react-app-rewire-typescript-hmr 之前，我们需要先安装几个必要的依赖：
npm install react-app-rewired react-app-rewire-typescript react-app-rewire-hot-loader -D npm install typescript @types/react @types/react-dom @hot-loader/react-dom -D
接下来，我们需要在项目的根目录中创建一个 config-overrides.js 文件，之后在这个文件中使用 react-app-rewired 来覆盖默认的配置。示例代码如下：
-- -------------------- ---- -------
----- - --------- --------------------- --------------- ----------- ---------------- - - -------------------------
----- ---------------- - ---------------------------------------
----- --------------- - ---------------------------------------
----- ------------------- - ----------------------------------------------
----- ---- - ----------------
-------------- - ---------
-------------
-------------------------------------------------
----------------------
----- ----------
-------- ---------------
---- -
- ------- --------------- -------- - --------------- ---- - --
- ------- ------------ -------- - -------------- ---- - --
--
---
------ -- ------------------------ ----------------------
------ -- -
-- ------ ----- --- --- ------ ------ -- ----------
----- -------- - ------------------------------- -- ---------
----- ----- - ------------------------------------
-- ------ --- --- ------ ------ --- ---- ---- -------------
------------------------- - -- -- -
----- ---------
---- ---------------- --------------
---
------ -------
--
-----------------
--- ---------------------
---------- ------------
--------------------- -----
---------------------------- -----
--------- ----------------------- -------------------
---
--
------ -- ----------------------- ----------------------
--使用
在上述的 config-overrides.js 中，我们添加了 rewireTypescript 和 rewireHotLoader 这两个库。我们也加了一个 TypescriptHMRPlugin，这个插件可以发现 TypeScript 的类型错误，并且在热更新时提供更好的性能。
为了在 TypeScript 中使用热更新功能，我们还需要对 src/index.tsx 文件进行一些修改。示例代码如下：
import ReactDOM from 'react-dom';
import { hot } from 'react-hot-loader/root';
import App from './App';
const HotApp = hot(App);
ReactDOM.render(<HotApp />, document.getElementById('root'));我们需要使用 react-hot-loader 的 hot 函数包装 App 组件，这样就可以在 TypeScript 中使用 React 的热更新功能了。
示例代码
我们写一个简单的例子来说明如何在 TypeScript 中使用热更新功能。假设我们需要开发一个简单的 Todo List，其中的每一个 Todo Item 在点击后会有一个“完成”或“未完成”的状态切换。完整代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
--------- ------------- -
--- -------
-------- -------
----- --------
------------- ---- ------- -- -----
-
----- -------- ------- ------------------------------ -
----------- - -- -- -
----- - --- ------------ - - -----------
-----------------
--
-------- -
----- - -------- ---- - - -----------
------ -
--- -------------------------- -------- --------------- ---- - -------------- - ------ ---
---------
-----
--
-
-
--------- ------------- -
------ -------
------------- ---- ------- -- -----
-
--------- ---- -
--- -------
-------- -------
----- --------
-
----- -------- ------- ------------------------------ -
---------------- - ---- ------- -- -
----- - ------------ - - -----------
-----------------
--
-------- -
----- - ----- - - -----------
------ -
----
--------------- -- -
--------- ------------- --------- ------------------------------------ --
---
-----
--
-
-
--------- ------------ --
--------- ------------ -
------ -------
-
----- ------- ------- ----------------------------- ------------- -
------ ------------ - -
------ -
- --- -- -------- ---- ------ ----- ----- --
- --- -- -------- ----- -------- ----- ---- --
- --- -- -------- --- --------- ----- ----- --
--
--
---------------- - ---- ------- -- -
----- - ----- - - -----------
--------------- ------ -------------- -- -------- --- -- - - -------- ----- ---------- - - ------ ---
--
-------- -
----- - ----- - - -----------
------ -
-----
------ ---- ---------
--------- ------------- ------------------------------------ --
------
--
-
-
------ ------- --------通过这个例子，我们可以学习到如何在 TypeScript 中使用热更新功能，并且理解其原理。在实际开发中，我们可以根据需求进行调整，实现更为复杂的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566bf81e8991b448e30dd