TypeScript联合类型中组件Props的类型关联窄化与安全索引问题

我完全理解你遇到的困扰——TypeScript的控制流分析没办法自动关联联合类型Props里的两个属性：当attribute存在时，它不知道value一定是对应的对象类型O，所以会抛出索引不合法的错误。这是因为TS默认不会跨属性做类型关联，得我们手动给它明确的“类型提示”才行。

问题根源 #

你的ComponentProps<O>是一个典型的互斥属性联合类型，两个分支分别对应「原始值+无attribute」和「对象+有attribute」，但TS没办法从attribute的存在与否，反向推导value的具体类型。比如当你检查if (attribute)时，TS只知道attribute是FilteredKeyof<O, string>，但它不明白这时候value必然是O而不是string，所以会把value当成string | O的联合类型，自然没法用attribute安全索引。

解决方案1：自定义类型守卫（不修改原有Props结构） #

如果不想改动Props的定义，你可以写一个自定义类型守卫函数，专门判断当前Props属于联合类型的「对象分支」，让TS明确知道此时value是O、attribute是合法的索引键。

先完善类型守卫和组件代码：

type FilteredKeyof<O extends {[key: string]: any}, T> = { [K in keyof O]: O[K] extends T ? K : never }[keyof O];
type ComponentProps<O extends object> = 
  | { value: string; attribute?: never }
  | { value: O; attribute: FilteredKeyof<O, string> };

// 自定义类型守卫：判断props是否属于对象分支
function isObjectValueProps<O extends object>(
  props: ComponentProps<O>
): props is { value: O; attribute: FilteredKeyof<O, string> } {
  // 注意排除null，因为typeof null也会返回'object'
  return typeof props.value === 'object' && props.value !== null && props.attribute !== undefined;
}

function Component<O extends object>({ value, attribute }: ComponentProps<O>): ReactNode {
  if (isObjectValueProps({ value, attribute })) {
    // TS现在能明确识别：value是O类型，attribute是合法索引键
    return value[attribute];
  }
  return value;
}

解决方案2：重构为可辨识联合类型（更推荐） #

如果允许修改ComponentProps的结构，添加一个字面量类型的判别式（比如type字段）是最清晰、最安全的方案。可辨识联合是TypeScript专门为这类关联场景设计的特性，TS能通过判别式自动完成类型窄化。

重构Props类型并实现组件：

type FilteredKeyof<O extends {[key: string]: any}, T> = { [K in keyof O]: O[K] extends T ? K : never }[keyof O];
// 重构为可辨识联合，增加type字段作为判别式
type ComponentProps<O extends object> = 
  | { type: 'primitive'; value: string }
  | { type: 'object'; value: O; attribute: FilteredKeyof<O, string> };

function Component<O extends object>(props: ComponentProps<O>): ReactNode {
  if (props.type === 'object') {
    // TS自动识别：此时props.value是O，props.attribute是合法索引
    return props.value[props.attribute];
  }
  return props.value;
}

为什么不推荐直接用类型断言？ #

你当然可以用(value as O)[attribute as keyof O]来强制跳过类型检查，但这种方法会绕过TS的安全校验，一旦逻辑出错（比如不小心在原始值分支调用了索引），TS没法帮你提前发现问题，所以只在万不得已时使用。

适配通用场景的补充 #

因为你提到string只是占位符，我们在类型守卫里没有依赖typeof value === 'string'，而是通过检查value是对象且不为null、同时attribute存在来判断分支，这样不管你替换成什么原始类型（比如number、boolean），这个逻辑都能无缝适配。

内容来源于stack exchange