如何将类型用作另一种类型的键？

【问题标题】：how to use type as key of another type?如何将类型用作另一种类型的键？
【发布时间】：2022-12-05 00:15:01
【问题描述】：

如下例所示，我试图实现这种行为，因为我想将组件名称与其 props 一起动态传递

有什么建议么？

因为当前的实现没有按预期工作


type AllowedComponents = 'A' | 'B' | 'C'

type StepProps = {
  A: AProps,
  B: BProps,
  C: CProps
}

function someFn(componentName:AllowedComponents, props : stepProps[typeof componentName] ){
....
}

【问题讨论】：

看起来您希望 someFn 为 generic，如 here 所示。那能满足你的需求吗？如果是这样，我可以写一个完整的答案来解释；如果没有，我错过了什么？
@jcalz 是的，这正是我需要的:)谢谢你，等待完整的答案

标签： typescript typescript-typings typescript-generics

【解决方案1】：

您希望someFn()为generic，如下所示：

function someFn<K extends AllowedComponents>(componentName: K, props: StepProps[K]) { }

通用类型参数K被限制为AllowedComponents类型，因此它只能是允许的组件名称之一。 componentName参数是K类型。props参数是indexed access typeStepProps[K]，所以它的类型将是给定componentName的道具类型。

这样，someFn() 函数可用于以类型安全的方式将组件名称及其对应的 props 传递给函数。这是您可能如何使用它的示例：

declare const aProps: AProps;
declare const bProps: BProps;
someFn("A", aProps); // okay!
someFn("A", bProps); // error!

Playground link to code

【讨论】：