前言
TypeScript 是一种由 Microsoft 推出的 JavaScript 的超集，它提供了类型系统和其他一些优秀的特性使得 JavaScript 在大型应用开发中更加易于维护。React 是由 Facebook 所开源的一个 Web 前端框架，它可以快速构建单页面应用（SPA）。本文将介绍如何使用 TypeScript 构建 React 单页面应用，以及如何优雅地使用 TypeScript。
TypeScript 与 React
安装 TypeScript
要使用 TypeScript，需要先安装它。在终端或命令行中执行以下命令即可安装 TypeScript：
npm install --save-dev typescript
在项目根目录下执行这个命令，将会在项目的 node_modules 目录中安装 TypeScript。
配置 TypeScript
TypeScript 需要一个 tsconfig.json 配置文件来确定项目的编译选项。在项目根目录中创建一个名为 tsconfig.json 的文件，并添加以下内容：
-- -------------------- ---- -------
-
------------------ -
--------- ------
--------- -----------
------ --------
------------ ----
--
---------- -
------------
-
-这些选项可以根据项目的需要进行修改。 target 选项指定编译后的 JavaScript 的版本，module 选项决定了 TypeScript 的模块化方式，jsx 选项用来编译 React 的 JSX 语法。 sourceMap 选项允许在调试时查看 TypeScript 代码。include 选项指定编译 TypeScript 文件的目录。
使用 TypeScript 编写 React 组件
创建一个 React 组件 Hello.tsx，并添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
---- ----- - -
----- -------
--
----- ----- - -- ---- -- ------ -- -
------ -
-----
------ -------
------
--
--
------ ------- ------这个组件接收一个 name 字符串作为属性，并在组件中显示。可以看到，在组件定义中使用了 TypeScript 中的类型声明，这使得代码的可读性更强，同时 TypeScript 的类型检查功能也能帮我们发现一些潜在的错误。
TypeScript 和 React Hooks
React Hooks 是 React v16.8 推出的一种新特性，它可以使我们的代码更简洁、更易于阅读和维护。在 TypeScript 中，Hooks 的类型声明需要一些额外的配置。下面是一个使用 TypeScript 和 Hooks 编写的计数器组件的例子：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ------- - -- -- -
----- ------- --------- - --------------------
----- ----------- - -- -- -
-------------- - ---
--
------ -
-----
---
--- ------- ------- ------
----
------- ----------------------
----- --
---------
------
--
--
------ ------- --------在这个例子中，我们使用了 React 的 useState Hook 来保存计数器的状态。useState 的类型声明需要指定初始值的类型。在这里，我们将计数器的初始值设为 0。 handleClick 函数被调用时会改变计数器的值，并重新渲染组件。
总结
在本文中，我们了解了如何使用 TypeScript 构建 React 单页面应用，以及如何优雅地使用 TypeScript。无论是在大型应用开发中还是小型项目中，使用 TypeScript 都可以提高代码的可读性和可维护性，并且 TypeScript 带来的代码提示和类型检查功能也能够在开发过程中提高效率。
GitHub 代码仓库示例：https://github.com/USERNAME/REPO_NAME
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ee38d48841e9894e90f4f