Consider this example:
type SomeType = {
paymentMethod?: string;
}
const someObj: SomeType = {};
const someTest = ['creditCard', 'payPal'].includes(someObj.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.paymentMethod
is possibly undefined aka the type is string | undefined
.
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?
CodePudding user response:
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.paymentMethod);
It is a bit verbose in the TypeScript code tho, so there are two more options:
Checking upfront if someObj.paymentMethod
is defined:
const someTest = !!someObj.paymentMethod && ['creditCard', 'payPal'].includes(someObj.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.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
CodePudding user response:
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);
CodePudding user response:
You can use Non-null assertion operator - !
:
type SomeType = {
paymentMethod?: string;
}
const someObj: SomeType = {};
const someTest = ['creditCard', 'payPal'].includes(someObj.paymentMethod!);