8 在 React 中使用 TypeScript

在前面的章节中，我们介绍了什么是 TSX，以及它如何使得我们在 React 中的开发更加高效和类型安全。现在，让我们深入探讨如何在 React 中实际使用 TypeScript。

TypeScript 的基本概念

在开始之前，回顾一下 TypeScript 的一些基础概念。TypeScript 是 JavaScript 的一个超集，它引入了强类型的特性。通过类型注解，我们可以更加清晰地了解变量、函数和组件的类型，这对代码的可读性和可维护性至关重要。

类型注解

在 TypeScript 中，可以使用类型注解来定义变量的类型。例如：

let myNumber: number = 42;
let myString: string = "Hello, TypeScript!";

在 React 中，我们常用类型注解来定义组件的 props 和 state。

使用 TypeScript 定义 Props 和 State

在 React 组件中使用 TypeScript，我们需要定义组件的 props 和 state。通过定义接口，我们可以明确这些数据的结构和类型。

定义 Props

假设我们有一个简单的组件 Greeting，用于显示一条问候信息。我们可以为其定义 props 的类型如下：

import React from 'react';

interface GreetingProps {
  name: string;
  age?: number; // 可选属性
}

const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      {age && <p>You are {age} years old.</p>}
    </div>
  );
};

在上面的代码中，我们定义了一个 GreetingProps 接口，来描述 Greeting 组件的 props。其中 name 是必选的字符串，而 age 是可选的数字。

定义 State

对于类组件，我们也可以使用 TypeScript 来定义 state 的类型。以下是一个简单的计数器示例：

import React, { Component } from 'react';

interface CounterState {
  count: number;
}

class Counter extends Component<{}, CounterState> {
  constructor(props: {}) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

在这个例子中，我们定义了一个 CounterState 接口来描述组件的 state 结构。组件的 state 包含一个 count 属性，用于跟踪计数值。

使用 TypeScript 约束事件处理函数

在 React 中，我们常常需要处理用户的输入或交互事件，TypeScript 允许我们为事件处理函数添加类型约束。例如：

const Button: React.FC = () => {
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    console.log("Button clicked!", event);
  };

  return <button onClick={handleClick}>Click Me</button>;
};

在这里，handleClick 函数的 event 参数被指定为 React.MouseEvent<HTMLButtonElement> 类型，使得我们能够访问事件的特定属性，而不必担心类型错误。

结合示例：使用 TypeScript 构建一个简单的 Todo List

让我们通过一个简单的 Todo List 应用示例，来展示如何在 React 中使用 TypeScript。我们将构建一个组件，允许用户添加和删除任务。

import React, { useState } from 'react';

interface Todo {
  id: number;
  text: string;
}

const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [inputValue, setInputValue] = useState<string>('');

  const addTodo = () => {
    if (inputValue.trim()) {
      const newTodo: Todo = {
        id: todos.length + 1,
        text: inputValue
      };
      setTodos([...todos, newTodo]);
      setInputValue('');
    }
  };

  const removeTodo = (id: number) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div>
      <h2>My Todo List</h2>
      <input 
        type="text" 
        value={inputValue} 
        onChange={(e) => setInputValue(e.target.value)} 
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => removeTodo(todo.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

在这个 TodoList 组件中，我们定义了 Todo 接口，描述每个任务的结构。我们使用 useState 钩子来管理任务列表和输入框的值，并为添加和删除任务实现了函数。

小结

通过本节内容，我们了解了如何在 React 中使用 TypeScript，包括定义 props、state以及事件处理函数类型。使用 TypeScript，不仅可以提高代码的安全性与可读性，还能让我们在开发中获得更好的开发体验。

在下一节中，我们将探讨如何配置 TypeScript 环境，使得在你的项目中使用 TypeScript 成为可能，敬请期待！