react hooks + TS实现列表模糊查询搜索功能，选择或输入一项就过滤一次数组并显示到页面上。可以不选择，输入也可以为空，只要任意一个条件就可以查询。可以写一个小demo吗？

当然可以，下面是一个简单的示例，使用了React Hook和TypeScript实现列表模糊查询搜索功能：

import React, { useState } from "react";

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

const data: IData[] = [
  { id: 1, name: "Apple" },
  { id: 2, name: "Banana" },
  { id: 3, name: "Cherry" },
  { id: 4, name: "Durian" },
  { id: 5, name: "Elderberry" },
];

const SearchList = () => {
  const [searchText, setSearchText] = useState<string>("");
  const [searchResults, setSearchResults] = useState<IData[]>([]);

  const handleSearch = (text: string) => {
    const results = data.filter((item) =>
      item.name.toLowerCase().includes(text.toLowerCase())
    );
    setSearchResults(results);
  };

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchText(event.target.value);
    handleSearch(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchText}
        onChange={handleInputChange}
      />
      <ul>
        {searchResults.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default SearchList;

在这个示例中，我们定义了一个IData接口表示数据类型，然后定义了一个data数组，它包含了我们要搜索的数据。接着，我们使用useState Hook定义了两个状态：searchText和searchResults。searchText用于保存用户输入的搜索文本，而searchResults用于保存搜索结果。handleInputChange回调函数在每次搜索文本变更时会被调用，它会更新searchText状态，并调用handleSearch函数进行搜索。handleSearch函数会根据用户输入的搜索文本，过滤data数组并更新searchResults状态。最后，我们在页面上展示了搜索结果。