📜  创建 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 文档。

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

参考资料: