TypeScript在React项目中的实战经验（源码附上）

2023-10-21 07:47:53

TypeScript 在 React 项目中的实践

环境配置

在开始使用 TypeScript 之前，需要安装 TypeScript 环境。通过运行以下命令进行安装：

npm install -g typescript

创建 React 项目

使用以下命令创建新的 React 项目，并指定 TypeScript 模板：

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

编写 TypeScript 代码

在 src 文件夹中，找到 App.tsx 文件，这是 React 项目的主组件文件。在此文件中编写 TypeScript 代码。

编译 TypeScript 代码

编写完 TypeScript 代码后，使用以下命令进行编译：

tsc

该命令将把 src 文件夹中的 TypeScript 代码编译为 JavaScript 代码，并存储在 dist 文件夹中。

运行 React 项目

编译完成后，使用以下命令运行 React 项目：

npm start

该命令将在浏览器中打开 React 项目。

部署 React 项目

部署 React 项目之前，需要先打包项目。使用以下命令打包：

npm run build

打包完成后，将 build 文件夹中的文件复制到服务器上进行部署。

示例代码

以下是一个简单的 TypeScript 组件示例：

import React, { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default App;