呈现数组时的React-typescript问题

interface Item {
  id: number;
  name: string;
}

const items: Item[] = [
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
  { id: 3, name: "Item 3" }
];

const MyComponent: React.FC = () => {
  return (
    <div>
      {items.map((item: Item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

const items: Item[] = [];

const MyComponent: React.FC = () => {
  return (
    <div>
      {items.length > 0 ? (
        items.map((item: Item) => (
          <div key={item.id}>{item.name}</div>
        ))
      ) : (
        <div>No items found.</div>
      )}
    </div>
  );
};

interface MyComponentProps {
  items: Item[];
}

const MyComponent: React.FC<MyComponentProps> = ({ items }) => {
  return (
    <div>
      {items.map((item: Item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

const items: Item[] = [
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
  { id: 3, name: "Item 3" }
];

const App: React.FC = () => {
  return <MyComponent items={items} />;
};