How to solve TypeScript `possibly null` error within ternary?

Question

I want to add a ternary operator to add a class:

className={clsx(classes.text, {
   classes.textSmall]: children.length > 11,
})}

This works but I get a TypeScript error:

Object is possibly 'null' or 'undefined'. TS2533

I'm not sure what can be improved here. Would anyone be able to point me in the right direction?

Which object is possibly null or undefined? Is it classes or children? — VLAZ
– VLAZ, Commented Jul 31, 2020 at 3:46

Cory Harper · Accepted Answer · 2020-07-31 03:50:10Z

2

If you are on Typescript version 3.7 you can use nullish coalescing and optional property access to deal with possibly null values within a ternary:

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining

I'm assuming here that children is the possibly null value, here are some examples:

// Optional property access, double bang operator because it will resolve to undefined if the property is undefined
foo: !!(children?.length > 11);

// With nullish coalescing
bar: children?.length ?? 0 > 11;

// Without either
baz: children && children.length > 11;

edited Jul 31, 2020 at 3:50

answered Jul 31, 2020 at 3:45

Cory Harper

1,0558 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to solve TypeScript `possibly null` error within ternary?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related