TypeScript: How to use Array.includes with possibly undefined value (optional chaining) on array of strings

user_5577580 0
Viewed 744

Consider this example:

type SomeType = {
  paymentData?: {
    paymentMethod?: string;
  }
}

const someObj: SomeType = {};

const someTest = ['creditCard', 'payPal'].includes(someObj.paymentData?.paymentMethod);

This doesn't work in TypeScript because it infers the type of the array elements to be string so it requires the value used in with the includes function to also be of type string, but someObj.paymentData?.paymentMethod is possibly undefined aka the type is string | undefined. I cannot use the non-null assertion operator (!) as it can't be used after optional chaining.

JavaScript-wise it's perfectly fine if the includes checks with undefined, just TypeScript is unhappy about it. What are nice ways to satisfy TypeScript here?

typescript javascript
3 Answers

One way is to cast the array to an array of string | undefined. This is probably my preferred way as it doesn't leave any traces in the transpiled JavaScript code. Also it still prevents you from accidentally checking against e.g. a number which actually doesn't make sense.

const someTest = (['creditCard', 'payPal'] as (string | undefined)[]).includes(someObj.paymentData?.paymentMethod);

It is a bit verbose in the TypeScript code tho, so there are two more options:

Checking upfront if someObj.paymentData?.paymentMethod is defined:

const someTest = !!someObj.paymentData?.paymentMethod && ['creditCard', 'payPal'].includes(someObj.paymentData.paymentMethod);

Ensuring the value is always a string by falling back to an empty string in case of undefined using the nullish coalescing operator (??):

const someTest = ['creditCard', 'payPal'].includes(someObj.paymentData?.paymentMethod ?? '');

For further reference, here is a related thread on GitHub abut the typing of the Array.includes function: https://github.com/microsoft/TypeScript/issues/26255

user_55775800

You can use Non-null assertion operator - !:

type SomeType = {
  paymentMethod?: string;
}

const someObj: SomeType = {};

const someTest = ['creditCard', 'payPal'].includes(someObj.paymentMethod!);

Working example

user_143898300

Ideally, the paymentMethod type would be defined. Usually this is defined by an API, if not, you should define it:

type PaymentMethod = 'creditCard' | 'payPal';

interface SomeType {
  paymentMethod?: PaymentMethod;
}

const someObj: SomeType = {};

const someTest = ['creditCard', 'payPal'].includes(someObj.paymentMethod);
user_75693080
Related