如何在TypeScript中为React useState Hook正确标注枚举类型

直接将定义好的Status枚举作为useState的泛型参数即可，这样就能严格限定状态值只能是枚举中的某一个成员。另外注意你代码里的ApiStatus应该是笔误，要改成定义好的Status。

正确代码示例：

import { useState } from 'react';

export enum Status {
  PENDING = 'pending',
  SUCCESS = 'success',
  ERROR = 'error',
}

// 标注后状态值仅能为Status枚举的成员
const [isValid, setIsValid] = useState<Status>(Status.PENDING);

说明 #

• <Status>作为泛型参数传入useState后，TypeScript会自动校验：
  1. 初始值Status.PENDING是否符合枚举类型
  2. 后续调用setIsValid时传入的参数是否属于Status枚举（比如setIsValid(Status.SUCCESS)合法，传入'loading'这类非枚举值会直接触发类型报错）

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