Интерфейс 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]
}

Другими словами, для данного instance из ShowModalPayload я хочу присвоить 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

, что, возможно, не то, что вы хотите, но не запрещено.Приведенного выше определения, вероятно, достаточно для большинства случаев использования.

Надеюсь, это поможет.Удачи!