如何为React函数组件的state指定TypeScript接口类型？

你可以通过useState的泛型参数直接指定状态的类型为Drink[]，同时优化初始值和数据获取的类型处理，具体操作如下：

1. 调整接口位置（可选但推荐） #

把Drink接口移到组件外部，方便复用且更符合代码组织规范：

interface Drink {
  strCategory: string;
}

function App() {
  // ... 组件内容
}

2. 给useState指定类型 #

在useState后通过<>传入泛型类型Drink[]，初始值可以用符合类型的空数组（或保留你原有的初始对象数组）：

// 方式1：空数组作为初始值（更合理）
const [drinks, setDrinks] = useState<Drink[]>([]);

// 方式2：保留原有初始对象
const [drinks, setDrinks] = useState<Drink[]>([{strCategory: ''}]);

3. 优化数据获取的类型安全 #

为避免jsonData类型模糊，可给它指定包含drinks字段的接口，或直接用类型断言：

const fetchData = async () => {
  const response = await fetch('https://www.thecocktaildb.com/api/json/v1/1/list.php?c=list');
  // 定义API返回数据的类型
  interface ApiResponse {
    drinks: Drink[];
  }
  const jsonData = await response.json() as ApiResponse;
  setDrinks(jsonData.drinks);
};

完整修改后的代码 #

interface Drink {
  strCategory: string;
}

function App() {
  const [drinks, setDrinks] = useState<Drink[]>([]);

  const fetchData = async () => {
    const response = await fetch('https://www.thecocktaildb.com/api/json/v1/1/list.php?c=list');
    interface ApiResponse {
      drinks: Drink[];
    }
    const jsonData = await response.json() as ApiResponse;
    setDrinks(jsonData.drinks);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <h2>Drinks</h2>
        {drinks.map((item, index) => {
          return <Link className='App-link' key={index} to={`/category?c=${item.strCategory}`}>{item.strCategory}</Link>;
        })}
      </header>
    </div>
  );
}

注：我还修改了to属性的写法，用模板字符串把strCategory拼接到URL中，确保跳转链接携带正确的分类参数。

内容的提问来源于stack exchange，提问作者NewToJS