react hooks + TS实现列表模糊查询搜索功能，一个输入框三个选择框，选择或输入一项就过滤一次数组并显示到页面上，选择框和输入框非必填，以填写的信息查询。可以写一个小demo吗？

当然可以，以下是一个使用 React Hooks 和 TypeScript 实现的列表模糊查询搜索功能的示例代码：

import React, { useState, useMemo } from 'react';

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

const items: Item[] = [
  { id: 1, name: 'Tom', gender: 'male', age: 20 },
  { id: 2, name: 'Jerry', gender: 'male', age: 22 },
  { id: 3, name: 'Alice', gender: 'female', age: 18 },
  { id: 4, name: 'Bob', gender: 'male', age: 25 },
];

const App = () => {
  const [name, setName] = useState('');
  const [gender, setGender] = useState('');
  const [age, setAge] = useState('');

  const filteredItems = useMemo(
    () =>
      items.filter((item) => {
        if (name && !item.name.includes(name)) return false;
        if (gender && item.gender !== gender) return false;
        if (age && item.age !== +age) return false;
        return true;
      }),
    [name, gender, age]
  );

  return (
    <div>
      <div>
        <input
          type="text"
          placeholder="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <select value={gender} onChange={(e) => setGender(e.target.value)}>
          <option value="">Gender</option>
          <option value="male">Male</option>
          <option value="female">Female</option>
        </select>
        <input
          type="number"
          placeholder="Age"
          value={age}
          onChange={(e) => setAge(e.target.value)}
        />
      </div>
      <ul>
        {filteredItems.map((item) => (
          <li key={item.id}>
            {item.name} ({item.gender}, {item.age})
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

在上面的示例代码中，我们定义了一个 Item 接口表示列表中的每一项，然后定义了一个 items 数组作为数据源。然后使用 useState 定义了三个状态，分别表示输入框和选择框中的值。接着使用 useMemo 计算出一个 filteredItems 数组，它根据输入框和选择框中的值过滤出符合条件的项。最后在页面中渲染出 filteredItems 数组中的每一项。