📌  相关文章
📜  创建 react app ts - TypeScript (1)

📅  最后修改于: 2023-12-03 14:50:14.265000             🧑  作者: Mango

创建 React App 使用 TypeScript

创建 React App 使用 TypeScript 是一种流行的开发模式，它结合了 React 框架和 TypeScript 语言的优势。React 是一个用于构建用户界面的 JavaScript 库，而TypeScript 是一个 JavaScript 的超集，添加了静态类型检查和其他增强特性。

下面是创建 React App 使用 TypeScript 的步骤：

1. 确保你的开发环境配置正确

在开始之前，你应该确保已经安装了以下软件：

  • Node.js：可从官方网站 https://nodejs.org/ 下载并安装。
  • npm：Node.js 安装时一同安装了 npm，你可以通过运行 npm -v 命令来验证它是否已经安装。
2. 使用 create-react-app 创建新项目

create-react-app 是一个向导，用于生成一个基本的 React 应用程序。你可以使用它创建一个包含 TypeScript 配置的新项目。

在命令行中运行以下命令：

npx create-react-app my-app --template typescript

这将创建一个名为 my-app 的新目录，并在其中生成一个包含 TypeScript 配置的基本 React 应用程序。

3. 运行应用程序

在项目根目录下运行以下命令启动应用程序：

cd my-app
npm start

这将在开发模式下启动应用程序，并自动打开一个浏览器窗口，显示应用程序。

4. 开始编写代码

你现在可以开始在 src 目录下编写你的 React 组件了，它们将使用 TypeScript 进行类型检查。

以下是一个简单的示例组件 MyComponent.tsx，它接受一个名为 name 的属性，并将其显示在页面上：

import React from 'react';

type MyComponentProps = {
  name: string;
};

const MyComponent: React.FC<MyComponentProps> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

export default MyComponent;
5. 使用组件

要在你的应用程序中使用组件，你需要在 src/App.tsx 中进行导入和使用。

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <MyComponent name="John" />
    </div>
  );
}

export default App;

你可以根据需要添加更多的组件和功能。

以上就是使用 TypeScript 创建 React App 的基本步骤。你可以根据需要进一步自定义和扩展你的应用程序。具体的文档和指南，请参考官方的 React 和 TypeScript 文档。

注意：以上命令和示例代码可能与你的操作系统和开发环境有所不同，请根据实际情况进行相应调整。

参考资料：