如何在 TypeScript 中使用 enum 正确输入 React useState hook

Question

如何正确输入我的 useState 挂钩？

我有这种enum类型：

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

还有useState钩子：const [isValid, setIsValid] = useState<// What to add here>(ApiStatus.PENDING);

那么useState钩子的值只能是其中一个Status值？

Answer 1

只需将类型设置为 即可Status。

const [isValid, setIsValid] = useState<Status>(ApiStatus.PENDING)

// valid
setIsValid(Status.PENDING)
setIsValid(Status.SUCCESS)
setIsValid(Status.ERROR)

如果您还想允许传递字符串值，请包装Status到模板文字类型中。

const [isValid, setIsValid] = useState<`${Status}`>(Status.PENDING)

// valid
setIsValid(Status.PENDING)
setIsValid(Status.SUCCESS)
setIsValid(Status.ERROR)
setIsValid("pending")
setIsValid("success")
setIsValid("error")

操场