Object is possibly 'undefined' Error on Optional Chaining Typescript

Question

I have a response which I am accessing: data?.currentOrganization?.onboardingSteps?. As you can guess, data, currentOrganization, and onboardingSteps might all be null. I want to assign a variable as follows:

const hasSteps = data?.currentOrganization?.onboardingSteps?.length > 0;

I thought hasValue would evaluate to false if any of the fields were null or if there was less than 1 step. However, I get the TypeScript error: Object is possibly 'undefined'.

This is how I am currently getting around it:

const hasSteps =
  data?.currentOrganization?.onboardingSteps != null &&
  data?.currentOrganization?.onboardingSteps?.length > 0;

This feels unnecessarily verbose. Is there an alternative, more elegant solution?

Answer 1

The optional chain will end up producing a value for data?.currentOrganization?.onboardingSteps?.length which is presumably a number if everything in the chain is not null or undefined.... but if anything in the chain is nullish, then the output will be undefined itself. You can't test undefined > 0 without Typescript complaining about it.

So you should probably do something like the following:

const hasSteps = (data?.currentOrganization?.onboardingSteps?.length ?? 0) > 0;

This is using nullish coalescing to produce 0 if the optional chain ends in undefined.

Playground link to code