我有這個“列舉”：
export const AuthEnum = Object.freeze({
AUTHENTICATED: 1,
UNAUTHENTICATED: 2,
PENDING: 3
})
這會起作用，但有點誤導：
const [isAuthenticated, setIsAuthenticated] = useState<number>(AuthEnum.PENDING);
這是我想做的，但不起作用：
const [isAuthenticated, setIsAuthenticated] = useState<AuthEnum>(AuthEnum.PENDING);
這也不起作用：
const [isAuthenticated, setIsAuthenticated] = useState<typeof AuthEnum>(AuthEnum.PENDING);
是否有可能以某種方式表明狀態的型別是 AuthEnum？
uj5u.com熱心網友回復：
這useState<AuthEnum>(AuthEnum.PENDING)不起作用，因為AuthEnum它是一個運行時值并且它被用作一種型別。AuthEnum只有當它是一個列舉時才允許以這種方式使用它。
這const [isAuthenticated, setIsAuthenticated] = useState<typeof AuthEnum>(AuthEnum.PENDING); 不起作用，因為typeof AuthEnum它是一個物件，而您傳遞的 AuthEnum.PENDING是一個數字。
實際上，您只想使用 的值AuthEnum。為了做到這一點，首先你應該使用as const斷言來縮小物件值的型別。
import React, { useState } from 'react'
const FakeEnum = {
AUTHENTICATED: 1,
UNAUTHENTICATED: 2,
PENDING: 3
} as const // immutability assertion
export const AuthEnum = Object.freeze(FakeEnum)
type Values<T> = T[keyof T]
const App = () => {
const [isAuthenticated, setIsAuthenticated] = useState<Values<typeof AuthEnum>>(AuthEnum.PENDING);
setIsAuthenticated(1) // ok
setIsAuthenticated(2) // ok
setIsAuthenticated(3) // ok
setIsAuthenticated(4) // expected error
return null
}
操場
Values 實用程式型別回傳所有??物件值的聯合。
有“as const”的原因是什么？
沒有as const AuthEnum變得公正：
Readonly<{
AUTHENTICATED: number;
UNAUTHENTICATED: number;
PENDING: number;
}>
而使用as const- 所有物件值都嚴格縮小：
Readonly<{
readonly AUTHENTICATED: 1;
readonly UNAUTHENTICATED: 2;
readonly PENDING: 3;
}>
as const 使您的物件不僅不可變，而且還縮小了所有值型別。
這就是為什么問題的作者使用不可變物件而不是enum. 既然你只有 3 個屬性：1, 2, 3你為什么允許setIsAuthenticated使用任何其他引數呼叫函式？很明顯，呼叫setIsAuthenticated(1000)是無效的，應該突出顯示為錯誤。
請使用常規查看此示例enum：
enum AuthEnum {
AUTHENTICATED = 1,
UNAUTHENTICATED = 2,
PENDING = 3
}
const App = () => {
const [isAuthenticated, setIsAuthenticated] = useState<AuthEnum>(AuthEnum.PENDING);
setIsAuthenticated(100) // no error, but should be
return null
}
沒有錯誤，但我們會期待。這是因為沒有推斷出 enum 的值。
你可以查看我關于使用enums是一種更安全的方式的文章。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/414879.html
標籤：