Logical operators with possible undefined value in typescript

Question

I am getting a error and I don't fully understand why. I understand that it could be undefined and therefore I need to check if it exists but if I setup the code as below then I get the errors. However if I replace {showDescription && with {isFeatureBlock && description && inline it works perfectly. Why does it not work if I assign it to a const? Note: I have simplified to focus on the main issue.

The Code

isFeatureBlock is a boolean, description is optional string

const showDescription = isFeatureBlock && description

{showDescription && (
   <BlockDescription>
     {description}
   </BlockDescription>
 )}

The Error

'Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'

Can you explain what is this rows: {showDescription && ( <BlockDescription> {description} </BlockDescription> )}? Is it object or something else? — P.S.
– P.S., Commented Sep 19, 2017 at 11:32
It just returns a div with some text in it, though I noticed need to update errors as i included an error from something else. The object undefined is related to another issue. My mistake. The first error still applies. — Ash
– Ash, Commented Sep 19, 2017 at 11:36

Oblosys · Accepted Answer · 2017-09-19 17:30:30Z

1

This code has no problems, but I assume in your real code, you use description in some place where a proper string is expected, and that is where the error is signaled. The reason why it works when you add description && is that in that case its type gets narrowed in the right-hand side of &&.

For description && SOME_EXP, TypeScript narrows the type of description from string | undefined to string inside SOME_EXP, as it can statically determine that description will not be undefined there. This only works if you use the variable directly in the left-hand side of the && expression though, so assigning it to a constant and using that constant won't work.

answered Sep 19, 2017 at 17:30

Oblosys

15.2k3 gold badges33 silver badges41 bronze badges

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

1 Comment

Ash Over a year ago

BTW, thanks for the explanation that is exactly what I needed, I did not realise the type would get narrowed was really confused!!

Collectives™ on Stack Overflow

Logical operators with possible undefined value in typescript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related