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]
}

换句话说，对于instance的给定ShowModalPayload，我想将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。 / p>

无论如何，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

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

希望有帮助。祝你好运！

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

1 个答案: