TypeScript 是一种为 JavaScript 添加类型注解的编程语言，它能让你在编写 JavaScript 的同时拥有更好的代码提示，更强大的编译时检查以及更友好的错误提示，这对于大型项目开发非常有用。React 是一个用于构建用户界面的 JavaScript 库，它提供了一套简单而又强大的 API，使得构建复杂的 UI 变得更加容易。本文将介绍如何使用 typescript-react-app 这个 npm 包来快速创建一个基于 TypeScript 和 React 的应用程序。
安装和使用
使用 typescript-react-app 创建应用程序非常简单，只需要在终端中运行下面的命令即可：
npx create-react-app my-app --template typescript
这个命令将会下载并创建一个新的 React 应用程序，同时使用 TypeScript 作为主要语言。你可以将 my-app 替换成你自己的项目名称。
运行上述命令后，你会看到一些信息在终端中显示，这些信息告诉你应用程序的目录结构，以及如何在开发和生产环境中运行应用程序。接下来，打开新创建的项目并进行一些简单的修改：
cd my-app
nano src/App.tsx
你应该看到一个新的 TypeScript 文件，其中包含一个简单的 React 组件。我们稍稍修改一下这个组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------
-------- ----- -
------ -
---- ----------------
------- -----------------------
------- ------------------------ --- ---- -- -----------
--
--------------------
--------------------------
---------------
------------- -----------
-
----- -----
----
---------
------
--
-
------ ------- ----修改后的组件中加入了 className 属性，它指定了 CSS 类 App，该类将在我们稍后创建的样式文件中定义。我们还添加了一个新的段落元素，其中包含了一个指向 React 官方文档的链接。
样式处理
要在应用程序中使用 CSS，我们需要先安装一些额外的依赖项。我们将使用 node-sass 这个依赖项来编译 SASS 样式，并将其转换为 CSS：
npm install node-sass@4.14.1 --save-dev
安装完成后，我们可以在 src 目录下创建一个新的 Sass 文件，例如 App.scss，其中包含了我们想要设置的样式。
.App {
text-align: center;
.App-link {
color: #61dafb;
}
}接下来，我们需要更新 App.tsx 文件以引入新的样式文件。我们可以使用 import 关键字来加载样式：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------
-------- ----- -
------ -
---- ----------------
------- -----------------------
------- ------------------------ --- ---- -- -----------
--
--------------------
--------------------------
---------------
------------- -----------
-
----- -----
----
---------
------
--
-
------ ------- ----现在，我们可以运行应用程序并查看样式是否生效：
npm start
组件化开发
在 React 中，你可以将 UI 组件分离成独立的代码片段，然后组合它们以创建复杂的 UI。我们可以创建一个新的组件来替换 App 组件中的所有内容：
nano src/components/App.tsx
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------------
--------- -------- -
----- -------
-
----- --- - -- ---- -- --------- -- -
---- ----------------
------- -----------------------
------- ----------------------------------- --- ---- -- -----------
--
--------------------
--------------------------
---------------
------------- -----------
-
----- -----
----
---------
---------- ------------
------
--
------ ------- ----在这个新的组件中，我们接收了一个 name 属性，并在页面中显示出来。接下来，我们需要更新 src/App.tsx 以使用新的组件：
nano src/App.tsx
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------------
------ --- ---- -------------------
-------- ------- -
------ -
-----
---- -------------------
------
--
-
------ ------- ------现在，我们已经将应用程序重构为组件化开发模式，并且能够使用 Sass 来编写样式。
状态管理
在 React 中，你可以使用状态来跟踪应用程序的状态并取得更新以更改UI。 useState 是一种使您能够在函数组件中包含状态的 hook。我们可以添加一个新的按钮来更改我们的 App 组件状态：
nano src/components/App.tsx
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------------------
--------- -------- -
----- -------
-
----- --- - -- ---- -- --------- -- -
----- ------- --------- - ------------
----- ------------- - -- -- -
-------------- - ---
-
------ -
---- ----------------
------- -----------------------
------- ----------------------------------- --- ---- -- -----------
------- ----------------------------- ------------
------ ------- --- ------ ------- ----------
--
--------------------
--------------------------
---------------
------------- -----------
-
----- -----
----
---------
---------- ------------
------
--
-
------ ------- ----在这个修改后的组件中，我们定义了一个名为 count 的新状态，它的值默认为 0。我们还定义了一个新的函数 handleOnClick，它在按钮被点击时被调用，并且通过调用 setCount 函数来更改 count 的值。最后，我们在页面中显示了当前计数器的值。
总结
在这篇文章中，我们介绍了使用 typescript-react-app 创建一个 React 应用程序，并且使用 SASS 来处理样式表。我们还将我们的应用程序重构为组件化开发模式，并展示了如何使用 useState hook 来处理组件的状态。通过使用 TypeScript 和 React，我们能够写出更加类型安全，可重用性更高且易于维护的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5551ab1864dac66b32