React + TypeScript 使用指南

2023-12-06 15:59:27

引言

React 和 TypeScript 都是当今最受欢迎的 Web 开发工具之一。React 是一个用于构建用户界面的 JavaScript 库，而 TypeScript 是一个为 JavaScript 添加类型系统的超集。将这两个工具结合起来，你可以编写出更健壮、更易于维护的代码。

基础概念

类型系统

TypeScript 的核心特性是其类型系统。类型系统允许你为变量、函数和对象指定类型。这有助于捕获错误，并在编译时而不是在运行时发现问题。

接口和类型

接口和类型是 TypeScript 中定义类型的主要方式。接口类似于抽象类，它们定义了一组属性和方法，而类型则可以是具体值（如字符串或数字）或复合类型（如接口或数组）。

React + TypeScript 实践

创建 React 组件

使用 TypeScript 创建 React 组件的第一步是创建一个新文件并将其扩展到 React.Component 类。然后，你可以定义组件的状态、道具和生命周期方法。

import React, { useState } from 'react';

interface Props {
  name: string;
}

const MyComponent = (props: Props) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

export default MyComponent;

类型化道具

TypeScript 允许你为组件道具指定类型。这有助于确保你传递给组件的数据具有正确的类型，并且可以捕获错误。

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

类型化状态

你还可以为组件的状态指定类型。这有助于确保你的状态具有正确的类型，并且可以捕获错误。

const [count, setCount] = useState<number>(0);

使用泛型

泛型允许你创建可重用的组件，这些组件可以处理不同类型的数据。例如，你可以创建一个接受任何类型数据的通用列表组件。

interface Props<T> {
  data: T[];
}

const MyList = <T>(props: Props<T>) => {
  return (
    <ul>
      {props.data.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};