前端技术的快速发展带来了更复杂的 web 应用程序，为了保证代码的可维护性和可重用性，TypeScript 已经成为开发者不可或缺的一种工具。在 React 项目中使用 TypeScript，能够让项目更加干净、易于维护和扩展。
本文旨在讲述如何在 React 项目中使用 TypeScript，编写可重用组件，并通过示例代码演示。
初始化 TypeScript
在 React 项目中使用 TypeScript，需要先进行初始化。
在终端中，运行以下命令：
create-react-app my-app --template typescript
其中，“my-app” 可以表达为你的项目名称。这个命令将使用 TypeScript 为你创建一个新的 React 项目。
创建组件
在 React 项目中，创建可重用组件是一个很好的实践。在 TypeScript 中，这个变得更加容易。
考虑到我们要创建一个可以重用的按钮组件，在 src/components 目录下新建一个 Button.tsx 文件，然后输入以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
--------- ----------- -
------ -------
-------- -- -- -----
-
------ ----- ------ - ------- ------------ -- -
------ -
------- -------- ---------------- ----------- -- ------------------------
-------------
---------
--
--这是一个非常简单的组件，由两个属性组成：一个 label 和一个 onClick 属性。
使用组件
现在，我们已经创建了一个可重用的 Button 组件。下面让我们看一看如何在另一个 React 组件中使用这个可重用的按钮组件。
在 src/App.tsx 文件中，添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ----------------------
--------- -------- -
------ -------
-
------ ----- --- ------- ------------------- --------- -
----- - -
------ -
--
----------- - -- -- -
----------------------- -- -- ------ --------------- - - ----
--
-------- -
------ -
---- -------- ---------- --------- ------- ------ ---
--------- ------------
---------------------------
------- ---------------- ------ -------------------------- --
------
--
-
-这是 App 组件，它使用了 Button 组件。在 handleClick 方法中，我们更新了 state，然后将 Button 组件作为 JSX 输出到页面。
如果你现在在浏览器中运行应用程序，你会看到一个包含计数器和“增加计数器”按钮的页面。
扩展组件
现在，我们已经创建了可重用的 Button 组件，并将其用于另一个组件中。
假设我们想扩展 Button 组件，以使其具有 moreStyles 属性，这将允许开发人员通过 props 对样式进行更多的自定义。
在 ButtonProps 接口中添加一个可选属性 moreStyles，然后在组件定义中将其添加为按钮的内联样式。
-- -------------------- ---- -------
------ ----- ---- --------
--------- ----------- -
------ -------
-------- -- -- -----
------------ --------------------
-
------ ----- ------ - ------- ------------ -- -
------ -
-------
--------
---------------- ------------
-------------------
--
-----------------------
-
-------------
---------
--
--现在，我们已经更新了组件和接口，我们可以使用更多的样式属性在我们的 Button 组件中进行自定义。下面是一个示例：
-- -------------------- ---- -------
-------
------------- ----- -------
----------- -- ------------- ----- ------ ---------
-------------
------------- -------
--------- -------
----------- ------
--
--结论
在本文中，我们介绍了如何在 React 项目中使用 TypeScript，编写可重用组件，并通过示例代码演示如何使用组件。我们已经看到，使用 TypeScript 和 React 可以极大地简化代码的维护和扩展，并带来更清晰、更易于理解的代码。
现在，你已经知道如何使用 TypeScript 编写可重用组件，下一步就是尝试在你的项目中使用 TypeScript 吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6773b0126d66e0f9aae66803