React 是一个流行的用于构建用户界面的 JavaScript 库。TypeScript 是一种强类型的 JavaScript 超集语言，它增加了类型检查和静态类型分析的优势。将它们结合使用，可以带来更安全、更可维护的代码。在本篇文章中，我们将详细介绍如何在 TypeScript 中使用 React。
安装
首先，需要安装 TypeScript 和 React 的依赖。可以使用 npm 或 yarn 来安装：
--- ------- ---------- ---------- ------------ ----------------
或者
---- --- ----- ---------- ------------ ----------------
创建项目
创建一个新项目，可以使用 create-react-app：
--- ---------------- ------ ---------- ----------
这将创建一个新的 React 项目，并使用 TypeScript 作为默认的语言。
编写组件
假设我们要创建一个简单的组件，它可以显示一条消息和一个按钮。点击按钮将会改变消息。我们可以创建一个名为 Message 的组件：
------ ------ - -------- - ---- --------
--------- ----- -
--------------- -------
-
----- -------- --------------- - -- -------------- -- -- -
----- --------- ----------- - -------------------------
------ -
-----
----------------
------- ----------- -- ------------------ ---------------
----- --
---------
------
--
--
------ ------- --------在这个组件中，我们使用了 useState 钩子来管理 message 状态。Props 接口定义了组件的属性，通过解构赋值来获取 initialMessage 属性，并将它传递给 useState 函数。
使用组件
现在，我们可以在一个父组件中使用我们的 Message 组件。我们可以在这个父组件中创建一个 initialMessage 属性，并将它传递给 Message 组件：
------ ----- ---- -------- ------ ------- ---- ------------ ----- ---- -------- - -- -- - ------ -------- ---------------------- ------- --- -- ------ ------- ----
这将渲染出一个包含按钮和消息的 Message 组件。
对属性进行类型检查
在我们的 Message 组件中，我们使用了 Props 接口来定义了组件的属性，以确保我们传递了正确的类型。但是我们仍然需要在父组件中确保我们传递了正确的属性类型。
我们可以使用 TypeScript 的类型检查来确保传递给 Message 组件的属性是 Props 接口中定义的类型。我们可以修改父组件代码，如下所示：
------ ----- ---- --------
------ -------- - ----- -- ------------ - ---- ------------
----- ---- -------- - -- -- -
----- ------------- ------------ - -
--------------- ------- --------
--
------ -------- ----------------- ---
--
------ ------- ----在这个例子中，我们导入了 Props 接口，并将其重命名为 MessageProps，然后在父组件中创建了一个 messageProps 对象来存储 initialMessage 属性，它的类型是 MessageProps。然后使用扩展运算符将 messageProps 对象传递给 Message 组件。
总结
在本文中，我们介绍了如何在 TypeScript 中使用 React，从安装、创建项目、编写组件到使用组件等方面进行详细讲解。我们学习了如何使用 Props 接口来确保传递给组件的属性是正确的类型，以及如何使用 useState 钩子来管理组件的状态。结合实际示例代码，希望读者能够更深入学习和了解 TypeScript 和 React 的使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6533f2557d4982a6eb7b4326