枚举可以用作打字稿中的类型吗？

Question

我曾经使用枚举作为类型，因为以下代码是有效的：

enum Test {
    A,
    B,
}
let a: Test = Test.A

但是，当我使用它作为 React 状态的类型时，IDE 会抛出错误：类型 FetchState 无法分配给类型 SetStateAction。

这是我所做的：

const [ state, setState ]: [ FetchState, React.Dispatch<FetchState> ] = useState(FetchState.NULL)

我想确定是我的理解有误还是代码有问题。

Answer 1

如果

FetchState

是

enum

并且

FetchState.NULL

是该

enum

的有效成员，则正确的方法很简单：

const [state, setState] = useState(FetchState.NULL);

元组上不需要显式类型注释。

您还可以提供类型参数，但在这种情况下没有必要：

const [state, setState] = useState<FetchState>(FetchState.NULL);

两者的游乐场链接

但很多时候你不需要显式提供该类型参数； TypeScript 会根据初始值的类型推断它，如上面所示。但在某些情况下，您可能需要显式告诉 TypeScript 状态成员的类型是什么（通常是因为您使用的是联合类型）。在这种情况下，您需要包含类型参数：

const [example, setExample] = useState<string | null>(null);

我必须在那里使用类型参数，以便 TypeScript 知道

string

是

example

的有效值，而不仅仅是

null

。

---

我很好奇提供元组的类型。通过推断得到的类型是

[FetchState, React.Dispatch<React.SetStateAction<FetchState>>]

（请注意，这与您问题中的类型不太一样）。但有趣的是，如果您显式提供该类型，您 also 也必须显式向

useState

提供类型参数，您不能让 TypeScript 推断它。我不知道为什么会这样，但据我所知，永远不需要在元组上提供类型注释，这是学术性的。

Answer 2

您必须在 useState 中设置泛型类型，如下所示：

const [ state, setState ]: [ FetchState, React.Dispatch<FetchState> ] = useState<FetchState>(FetchState.NULL)

工作示例此处