Typescript 接口，为动态第二个属性引用一个实例属性

Question

我想使用 Typescript 接口实例中的属性来计算第二个属性。我一直在研究泛型，但我还没有成功实现这一点。 ：

这是一个例子

// Here I define all valid names - works fine!

type ModalNames = 'payment' | 'source'

// This interface implements all expected payloads
//  for each name 

interface ModalPayloads {
  payment: {
    plan: string
  }
  source: {
    metadataId: string
  }
}


// How do I use the instance name
//  to grab the correct payload property?
export interface ShowModalPayload {
  name: ModalNames
  modalProps?: ModalPayloads[instance.name]
}

换句话说，对于ShowModalPayload 中的给定instance，我想将modalProps 分配给从instance.name 派生的类型。 希望这是有道理的！

Answer 1

我会为此使用generics：

export interface ShowModalPayload<K extends ModalNames> {
  name: K
  modalProps?: ModalPayloads[K]
}

注意使用ModalPayloads[K] 代替ModalPayloads[instance.name]。这称为lookup type，它允许您描述m[k] 的类型，其中m 的类型为ModalPayloads，k 的类型为K。

无论如何ShowModalPayload 接口现在在K 中是通用的，它应该是ModalNames 文字之一：

declare const smpPayment: ShowModalPayload<'payment'>;
smpPayment.name // "payment"
smpPayment.modalProps // {plan: string} | undefined

declare const smpSource: ShowModalPayload<'source'>;
smpSource.name // "source"
smpSource.modalProps // {metadataId: string} | undefined

我认为这些与您正在寻找的内容相对应。请注意，以下仍然是可能的：

declare const smpWhoKnows: ShowModalPayload<ModalNames>
smpWhoKnows.name // ModalNames
smpWhoKnows.modalProps // {plan: string} | {metadataId: string} | undefined

这可能不是您想要的，但不被禁止。不过，对于大多数用例来说，上述定义可能就足够了。

希望对您有所帮助。祝你好运！