javascript - 如何使 TypeScript 枚举限制为特定数字

Question

我使用数字枚举类型来设置页面的访问代码:

export enum AdminAccess {
  None = 0,
  Dashboard = 1 << 0,
  ModifyUserInfo = 1 << 1,
  Publish = 1 << 2
}

我希望路由采用 AdminAccess 类型的参数，这样它只能在上面的值之间进行选择:

export interface AuthRouteProps {
  children: JSX.Element;
  path: string;
  pageIdentity: AdminAccess;
  exact?: boolean;
}

但是类型检查并没有像我预期的那样工作，只要我输入数字，检查就会通过。但我想要的是你只能输入AdminAccess.None , AdminAccess.Dashboard等等

<AuthRoute
  path={"somepath"}
  pageIdentity={AdminAccess.ModifyUserInfo} // pass check
  children={<ModifyUserInfoPage />}
/>
<AuthRoute
  path={"somepath"}
  pageIdentity={897654987} // also pass check
  children={<ModifyUserInfoPage />}
/>

我怎样才能做到这一点？

Answer 1

这个问题可能与 "What is the significance of enum in TypeScript" 重复。将答案转化为您的问题会产生如下结果:

无论好坏，TypeScript 中的数字枚举都可以分配给 number 或从 enum 分配，这直接导致了您所看到的问题。您可能会更好地放弃 namespace ，转而使用显式 numeric literal types 组合 type 和 1 << 2 ，如下所示:

export namespace AdminAccess {
  export const None = 0
  export const Dashboard = 1
  export const ModifyUserInfo = 2
  export const Publish = 4;
}
export type AdminAccess = typeof AdminAccess[keyof typeof AdminAccess];

const good: AdminAccess = AdminAccess.ModifyUserInfo; // okay
const bad: AdminAccess = 289849284924; // error
//    ~~~ <---
// Type '289849284924' is not assignable to type '0 | 1 | 2 | 4'.(2322)

请注意，像 4 这样的计算枚举需要替换为 ojit_code 这样的数字文字值才能正常工作(数字计算不会产生数字文字类型)。

希望有帮助；祝你好运!

Link to code