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

我会为此使用泛型 ：

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

请注意，使用ModalPayloads[K]代替ModalPayloads[instance.name] 。 这称为查找类型 ，它允许您描述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

这可能不是您想要的，但也不被禁止。 但是，上面的定义对于大多数用例而言可能已经足够。

希望能有所帮助。 祝好运！