React TypeScript - 使用 Create React App 和 TypeScript 开发 React 应用

本文将向你介绍如何使用 Create React App 和 TypeScript 开发 React 应用。由于 TypeScript 帮助我们大大减少了代码类型相关的错误，因此使用 TypeScript 来开发 React 应用是一种非常好的选择。

准备工作

安装 Node.js 和 npm

在开始之前，请确保在您的计算机上已安装 Node.js 和 npm。

我们推荐使用 LTS 版本的 Node.js。

安装 Create React App

Create React App 是一个用于创建 React 应用程序的官方脚手架程序。使用它可以帮助我们避免一些繁琐的配置工作。

可以通过 npm 或者 yarn 来安装 Create React App：

npm install -g create-react-app

或者

yarn global add create-react-app

创建 React 应用程序

创建 React 应用程序非常简单，只需要输入以下命令即可：

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

其中，my-app 是你的应用程序的名称，--template typescript 表示我们要创建的是一个 TypeScript 应用程序。

TypeScript 基础知识

在开始撰写我们的 React 应用程序之前，我们需要对 TypeScript 有一个基本的了解。

类型

TypeScript 是一种强类型的编程语言，我们可以根据需要为变量、函数、接口等添加类型注解：

let num: number = 123;
function greet(name: string): string {
  return `Hello ${name}!`;
}
interface Person {
  name: string;
  age: number;
}

泛型

泛型是 TypeScript 的一个非常强大的功能，它允许我们编写可以适用于多种类型的代码：

function identity<T>(arg: T): T {
  return arg;
}

let output1 = identity<string>("hello");
let output2 = identity<number>(123);

接口

接口是 TypeScript 的一个核心概念，它允许我们定义代码之间的契约：

interface Person {
  name: string;
  age: number;
}

function greet(person: Person) {
  return `Hello ${person.name}!`;
}

创建我们的 React 应用程序

现在，我们已经准备好开始开发我们的 React 应用程序了！

UI 组件

React 是一个基于组件构建 UI 的库。因此，我们首先需要定义一些 UI 组件：

import * as React from "react";

interface ButtonProps {
  text: string;
  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

export function Button(props: ButtonProps) {
  return <button onClick={props.onClick}>{props.text}</button>;
}

interface InputProps {
  label: string;
  type: string;
  value: string;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

export function Input(props: InputProps) {
  return (
    <div>
      <label>{props.label}</label>
      <input type={props.type} value={props.value} onChange={props.onChange} />
    </div>
  );
}

主要组件

接下来，我们需要编写一个主要的组件，用来展示我们的 UI 组件并处理用户的输入：

import * as React from "react";
import { Button, Input } from "./components";

interface AppState {
  firstName: string;
  lastName: string;
  fullName: string;
}

export default class App extends React.Component<{}, AppState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      firstName: "",
      lastName: "",
      fullName: "",
    };
  }

  private handleFirstNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({
      firstName: event.target.value,
      fullName: `${event.target.value} ${this.state.lastName}`,
    });
  };

  private handleLastNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({
      lastName: event.target.value,
      fullName: `${this.state.firstName} ${event.target.value}`,
    });
  };

  private handleSubmit = () => {
    alert(`Hello ${this.state.fullName}!`);
  };

  public render() {
    return (
      <div>
        <Input label="First Name" type="text" value={this.state.firstName} onChange={this.handleFirstNameChange} />
        <Input label="Last Name" type="text" value={this.state.lastName} onChange={this.handleLastNameChange} />
        <Button text="Submit" onClick={this.handleSubmit} />
      </div>
    );
  }
}

渲染

最后一步是将我们的应用程序渲染到页面上：

import * as React from "react";
import * as ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

运行应用程序

现在，我们就可以运行我们的应用程序了！

在命令行中输入：

npm start

或者

yarn start

然后访问 http://localhost:3000 即可。