使用Partial引发计算属性名类型错误，如何解决该TypeScript问题？

问题场景 #

我定义了路由常量：

export const Route = {
  HOME: 'home',
  LOGIN: 'login',
  STUDIES: 'studies',
} as const;

想要创建一个以Route的键为自身键的常量（仅必填STUDIES）：

export const RoutesPermissions: RoutesPermissionsType = {
  STUDIES: 'STUDIES',
} as const;

对应的类型定义：

export type RoutesPermissionsType = Partial<{
  [P in keyof typeof Route]: string;
}>;

随后创建另一个对象，键为RoutesPermissions的键，值为布尔类型：

export type PermissionsType = Partial<{
  [P in keyof typeof RoutesPermissions]: boolean;
}>;

export const ROUTES_PERMISSIONS: PermissionsType = {
  [RoutesPermissions.STUDIES]: true,
};

此时遇到TypeScript错误：

(property) STUDIES?: string | undefined
A computed property name must be of type 'string', 'number', 'symbol', or 'any'

错误原因 #

RoutesPermissions被标注为RoutesPermissionsType，这是一个Partial类型——意味着所有属性都是可选的，TypeScript会认为RoutesPermissions.STUDIES可能是undefined。而计算属性名要求必须是string/number/symbol类型，不能是undefined，因此触发报错。

解决方案 #

方案1：移除宽泛类型标注，让TypeScript自动推断 #

移除RoutesPermissions的显式类型标注，保留as const断言锁定字面量类型，让TypeScript自动推断其准确结构：

export const Route = {
  HOME: 'home',
  LOGIN: 'login',
  STUDIES: 'studies',
} as const;

// 不标注宽泛的Partial类型，直接定义并锁定常量
export const RoutesPermissions = {
  STUDIES: 'STUDIES',
} as const;

// 基于实际常量结构定义类型（可选，如需复用类型）
export type RoutesPermissionsType = typeof RoutesPermissions;

export type PermissionsType = Partial<{
  [P in keyof RoutesPermissionsType]: boolean;
}>;

// 此时RoutesPermissions.STUDIES是确定的字符串字面量，无报错
export const ROUTES_PERMISSIONS: PermissionsType = {
  [RoutesPermissions.STUDIES]: true,
};

方案2：用Pick约束类型（保留Route键的范围限制） #

如果需要确保RoutesPermissions的键只能来自Route的键，可以用Pick替代Partial来定义类型，明确指定实际使用的键：

export const Route = {
  HOME: 'home',
  LOGIN: 'login',
  STUDIES: 'studies',
} as const;

// 定义基础的非Partial类型，约束键来自Route
type BaseRoutesPermissions = {
  [P in keyof typeof Route]: string;
};

// 用Pick选择实际需要的键，而非用Partial使所有键可选
export type RoutesPermissionsType = Pick<BaseRoutesPermissions, 'STUDIES'>;

export const RoutesPermissions: RoutesPermissionsType = {
  STUDIES: 'STUDIES',
} as const;

export type PermissionsType = Partial<{
  [P in keyof RoutesPermissionsType]: boolean;
}>;

export const ROUTES_PERMISSIONS: PermissionsType = {
  [RoutesPermissions.STUDIES]: true,
};

内容的提问来源于stack exchange，提问作者Renaud is Not Bill Gates