Typescript，React:将数组对象设置为状态

基础概念

TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，为 JavaScript 添加了可选的静态类型检查和一些其他特性，如接口、泛型和枚举等。TypeScript 设计用于开发大型应用，并且可以在任何支持 JavaScript 的浏览器和运行时环境中编译为 JavaScript。

React 是一个用于构建用户界面的 JavaScript 库，它以组件化的方式来构建复杂的 UI，使开发者能够以声明式的方式编写 UI，当数据变化时，React 能够高效地更新和渲染组件。

在 React 中，状态（State）是组件内部的数据存储，它可以在组件的生命周期内发生变化，并触发组件的重新渲染。

类型

在 TypeScript 中，数组对象的状态可以有多种类型，例如：

数字数组：number[]
字符串数组：string[]
对象数组：{ key: string }[]
自定义类型数组：MyType[]

应用场景

当你需要在 React 组件中管理一组数据，并且这组数据可能会发生变化时，你可以将其设置为组件的状态。例如，一个待办事项列表应用，每个待办事项可以是一个对象，包含标题、描述和完成状态。

示例代码

以下是一个简单的 React 组件示例，它使用 TypeScript 来定义一个对象数组状态，并提供了一个方法来添加新的待办事项：

import React, { useState } from 'react';

interface TodoItem {
  title: string;
  description: string;
  completed: boolean;
}

const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<TodoItem[]>([]);

  const addTodo = (title: string, description: string) => {
    const newTodo: TodoItem = {
      title,
      description,
      completed: false,
    };
    setTodos([...todos, newTodo]);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <button onClick={() => addTodo('New Todo', 'Description of new todo')}>
        Add Todo
      </button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo.title} - {todo.description} - {todo.completed ? 'Completed' : 'Pending'}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;