面试题：React组件中如何使用TypeScript处理复杂的Props和State类型

Question

有一个React组件，它的`props`包含一个对象数组，数组中的每个对象有`id`（数字类型）、`title`（字符串类型）和`isCompleted`（布尔类型）属性。同时，组件内部有一个`state`用于存储当前选中的对象的`id`。请用TypeScript完整定义该组件的`props`和`state`类型，并编写相应的React组件逻辑，包括点击某个对象时更新`state`中选中对象的`id`。

Answer 1

import React, { useState } from 'react';

// 定义对象数组中每个对象的类型
type ItemType = {
  id: number;
  title: string;
  isCompleted: boolean;
};

// 定义props类型
type Props = {
  items: ItemType[];
};

// 定义state类型
type State = {
  selectedId: number | null;
};

const MyComponent: React.FC<Props> = ({ items }) => {
  const [state, setState] = useState<State>({ selectedId: null });

  const handleClick = (id: number) => {
    setState(prevState => ({
     ...prevState,
      selectedId: id
    }));
  };

  return (
    <div>
      {items.map(item => (
        <div
          key={item.id}
          onClick={() => handleClick(item.id)}
          style={{
            textDecoration: item.isCompleted? 'line-through' : 'none',
            cursor: 'pointer'
          }}
        >
          {item.title} - {item.isCompleted? '已完成' : '未完成'}
        </div>
      ))}
    </div>
  );
};

export default MyComponent;