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

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

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

Typescript 接口，引用一个实例属性用于动态秒属性

Typescript Interface, reference one instance property for dynamic second property

javascript

typescript

interface

typescript-types

Typescript 接口，引用一个实例 属性 用于动态秒 属性

Typescript Interface, reference one instance property for dynamic second property

javascript

typescript

interface

typescript-types

Typescript 接口，引用一个实例属性用于动态秒属性