object Typescript 中的合並或運算符

Question

如何擺脫或運算符（ | ）並合並所有 object 屬性以供所有人訪問？

因為現在，輸入payload.signInMethod TS 抱怨這個方法不存在於任何“或組”中，而是這個。 如何編寫類型以合並所有 object 鍵？

所需的 object：

Playground to reproduce my problem: https://www.typescriptlang.org/play/#code/C4TwDgpgBAwg9gO2BAHsKBeKBvAUFKAUQDcIkBBMMAGwEsBjAQ2FsQC4d8CpGq6mWiAAoALRgGcIHccABOtBAHMA3FwC+qggGVaihAEkEAJQgAzDnm5RxugwgCyEYCLgATDgHJFcOIuoQPKAAfKA9TRnoIACMfAGtAkI8QRhc4BNCAV0lZBEYAWwDNKA0uQhQwWQhxcRgRCHpYuAzgCy4CMEYQAqRHZzchSskkDhi4f0YEIoJxEVoqBUVyV1dB8QGqshaoUfHJtqhKyNpSIUZZYAQIWUI8xlpqcRGfXamoCrg8uHhXKWs5BaKalwQNw9EQMigiic8CQqHQWAAFB0QNQ4Ix3LBEMg0ABtWIQEBwUyY2FoAC6AEpMAA+TjtTqo9EAOhsekMvRcrmUUAA9DyoAAJOAAdygwDgkKcB1origRLFs3EUCusjgsmBQA

Answer 1

處理聯合類型的常用方法是使用類型保護將聯合縮小到其中一個成員。 在這種情況下， in類型保護效果最好：

type Context = {
  EventApplication: {
    applicationPhase: string;
  };
  SignInRef: {
    signInMethod: 'google' | 'facebook' | 'yahoo' | 'username';
  };
  ExpressCheckout: {
    paymentMethodPresent: boolean;
    shippingAddressPresent: boolean;
    receivePartnerEmails: boolean;
    promoCode: string;
  }
}

const getContext = (payload: Context[keyof Context]) => {
  if('signInMethod' in payload) {
    payload.signInMethod; 
  } else if('applicationPhase' in payload) {
    payload.applicationPhase
  } else{
    payload.promoCode
  }
}

玩

現在，如果您真的想直接在payload上訪問所有成員，一些| undefined | undefined必然會滲透到屬性類型中（因為屬性可能在特定的聯合成員上undefined ）。 我們可以從這里調整StrictUnion以使類型以您想要的方式工作：

type UnionKeys<T> = T extends any ? keyof T : never;
type StrictUnionHelper<T, TAll> = T extends any ? T & Partial<Record<Exclude<UnionKeys<TAll>, keyof T>, undefined>> : never;
type StrictUnion<T> = StrictUnionHelper<T, T>

type Context = {
  EventApplication: {
    applicationPhase: string;
  };
  SignInRef: {
    signInMethod: 'google' | 'facebook' | 'yahoo' | 'username';
  };
  ExpressCheckout: {
    paymentMethodPresent: boolean;
    shippingAddressPresent: boolean;
    receivePartnerEmails: boolean;
    promoCode: string;
  }
}

const getContext = (payload: StrictUnion<Context[keyof Context]>) => {
  payload.applicationPhase // string | undefined 
}

玩