前言
TypeScript 是一种面向对象的编程语言，它是 JavaScript 的超集，可以为 JavaScript 添加静态类型检查和语法扩展。React 是一个开源的 JavaScript 库，用于构建用户界面。TypeScript 和 React 结合使用可以提高代码可读性、可维护性和可靠性。
本文将介绍如何使用 TypeScript 开发 React 应用程序，包括配置开发环境、使用 TypeScript 开发组件和使用 TypeScript 集成 React 生态系统中的第三方库。本篇指南将对初学者和有经验的开发人员有所帮助。
配置开发环境
安装 TypeScript
首先，我们需要安装 TypeScript。可以使用以下命令在全局范围内安装 TypeScript。
npm install -g typescript
创建项目
接下来，使用以下命令创建一个新的 React 应用程序。
npx create-react-app my-app --template typescript
此命令会创建一个新的 React 应用程序，并使用 TypeScript 作为模板。
配置项目
我们需要配置一些内容以便使用 TypeScript 开发 React 应用程序。
tsconfig.json
首先，创建一个 tsconfig.json 文件，该文件将用于配置 TypeScript 编译器。
-- -------------------- ---- -------
-
------------------ -
------ ------- --------------- ----------
---------- -----
--------------- -----
------------------ -----
------------------------------- -----
--------- -----
----------------------------------- -----
--------- ---------
------------------- -------
-------------------- -----
------------------ -----
--------- -----
------ -------
--
---------- -------
-此配置选项将允许我们在开发时使用最新的 ECMAScript 标准、React 和 TypeScript。此外，这还允许我们通过 import React from 'react' 导入 React。
eslint
其次，我们需要配置 eslint 以使用 TypeScript 规则。
运行以下命令安装所需的包：
npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier prettier
接下来，创建一个 .eslintrc.js 文件：
-- -------------------- ---- -------
-------------- - -
---- -
-------- -----
------- -----
--
-------- -
---------
---------------------------
---------------------------------
----------------------------------------
-----------
------------------------------
--
------- ----------------------------
-------------- -
------------- -
---- -----
--
------------ ---
----------- ---------
--
-------- --------- -------------- --------------------- ------------
------ -
------------------------------- --- - ----------- -------- ---
-------------------- ------
------------------- ------
---------------------------------------- -
--
-
---------------- ---
---------------- ---
------------------ ---
------- ---------
------ ---
--
--
------------------------------- ------
-------------------- ----------
---------------------------------------------------- ------
------------------------------------- ------
--------------------------------------------------- ------
----------------------- ------
------------------------------------------ ----------
------------------------------------ ------
--
--我们可以使用以下命令在我们的编辑器中使用此规则：
npx install-peerdeps --dev eslint-config-airbnb
使用 CSS 模块
最后，我们需要配置 css-loader 和 style-loader 以支持使用 CSS 模块。
运行以下命令安装所需的包：
npm install --save-dev @types/react @types/react-dom @types/node @types/css-modules-loader-core
在 tsconfig.json 文件中添加以下内容：
{
"compilerOptions": {
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
}
}在 index.tsx 中导入 CSS 文件：
import './index.css';
在组件中使用 CSS 模块：
import styles from './Button.module.css';
function Button(): JSX.Element {
return <button className={styles.Button}>Click me</button>;
}使用 TypeScript 开发组件
现在，我们已经配置好了开发环境，我们可以开始使用 TypeScript 开发 React 组件了。
props 和状态
在 TypeScript 中，我们可以通过 interface 来定义组件的 props 和状态。
例如，以下代码定义了一个 Button 组件：
-- -------------------- ---- -------
------ ----- ---- --------
--------- ----------- -
-------- -- -- -----
---------- --------
--------- ----------------
-
--------- ----------- -
---------- --------
-
----- ------ ------- ---------------------------- ------------ -
------ ----------- - -
---------- ------
--
---------------- - --- ---- -- -
--------------- ---------- ---- ---
--
---------------- - --- ---- -- -
--------------- ---------- ----- ---
--
----------- - --- ---- -- -
----- - -------- -------- - - -----------
-- ----------- -
----------
-
--
--------- ----------- -
----- - --------- -------- - - -----------
----- - --------- - - -----------
------ -
-------
-------------
------------------------------------
------------------------------------
--------------------------
-------------------
-
---------- - -------------- - ---------
---------
--
-
-
------ ------- -------Refs
在 TypeScript 中，我们可以使用 React.createRef() 来创建一个 ref，这个 ref 可以被传递给 ref 属性。
例如，以下代码显示了如何在 TypeScript 中使用 ref 来获取输入字段的值：
-- -------------------- ---- -------
------ ------ - ---------- --------- - ---- --------
--------- ---------- -
------- -------
-
--------- ---------- -
------ -------
-
----- ----- ------- --------------------- ----------- -
------- -------- - ------------------------------
------ ---------- - -
------ ---
--
------------ - --- ---- -- -
----- - ----- - - --------------------- -- -----------------
--------------- ----- ---
--
--------- ----------- -
----- - ----- - - -----------
----- - ----- - - -----------
------ -
-----
------ -- ------ --------------------------------
------ ---------- ----------- ------------------- ------------- ---------------------------- --
------
--
-
-
------ ------- ------高阶组件
高阶组件是一个接受一个组件作为参数并返回一个新组件的函数。在 TypeScript 中，我们可以使用泛型来类型化高阶组件的输入和输出。
例如，以下代码创建了一个高阶组件 withLogger：
-- -------------------- ---- -------
------ ------ - ------------- - ---- --------
--------- --------------- -
---- --------- ------- -- -----
-
-------- ------------ ------- ---------------------------------- ----------------- -
------ ----- ---------- ------- ----------------------- ----- ----------------- -
--- - --------- -------- ---- -- -
-------------------------- -------------
--
--------- ----------- -
------ ----------------- --------------- -------------- ---
-
--
-
------ ------- -----------使用 TypeScript 集成第三方库
在 React 生态系统中有许多优秀的第三方库。TypeScript 已经允许我们在集成这些库时获得更好的代码提示和类型检查。
例如，以下代码显示了如何使用 React Hook Form 库：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ------------------
--------- ---------- -
--------- -------
--------- -------
-
-------- ------------ ----------- -
----- - --------- ------------ - - ----------------------
----- -------- - ------ ------------ ---- -- -
------------------
--
------ -
----- ----------------------------------
------ ------------------------- --
------ ------------------------- --------------- --
------- -----------------------------
-------
--
-
------ ------- ----------总结
TypeScript 和 React 结合开发可以提高代码可读性、可维护性和可靠性。本文介绍了如何配置开发环境、使用 TypeScript 开发组件和使用 TypeScript 集成 React 生态系统中的第三方库。同时，我们还简要介绍了如何使用 interface 来定义组件的 props 和状态、如何使用 ref、如何使用高阶组件。希望本篇指南能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ff5be48841e9894f786ee