React 是一个用于构建用户界面的 JavaScript 库，而 TypeScript 是一个强类型的 JavaScript 超集。将两者结合使用可以提高代码的可读性、可维护性和可扩展性。本文将介绍如何使用 TypeScript 创建 React 应用，并提供示例代码和详细解释。
搭建环境
首先，需要安装 Node.js 和 npm。可以从官网下载并安装。安装完成后，在命令行中输入以下命令来安装 create-react-app：
npm install -g create-react-app
接下来，在命令行中输入以下命令来创建一个新的 React 应用并使用 TypeScript：
npx create-react-app my-app --template typescript
这将创建一个名为 my-app 的新应用，并自动集成 TypeScript 支持。
添加组件
在 src 目录下创建一个名为 Components 的文件夹，并在其中创建一个名为 Greeting.tsx 的组件：
-- -------------------- ---- ------- ------ ----- ---- -------- ---- ------------- - - ----- ------- -- ----- -------- - -- ---- -- -------------- -- - ------ ---------- ------------- -- ------ ------- ---------
这个组件接受一个名为 name 的字符串属性，并在页面上显示“Hello, name!”的问候语。
使用组件
在 src 目录下的 App.tsx 文件中，引入 Greeting 组件并将其放置在页面上：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------------------
-------- ----- -
------ -
-----
--------- ----------- --
------
--
-
------ ------- ----这个页面将显示“Hello, John!”的问候语。
总结
本文介绍了如何使用 TypeScript 创建 React 应用，并添加和使用组件。使用 TypeScript 可以提高代码的可读性、可维护性和可扩展性，因此在实际项目中推荐使用。如果想学习更多关于使用 TypeScript 和 React 的技巧，可以查看相关文档和示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450856e980a9b385b988c41
