Issue
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 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?
Solution
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
Answered By - Ricki-BumbleDev
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.