TypeScript tip: Instead of using `filter(Boolean)` to remove null and undefined values from arrays, create a type guard function. 👇🏽 www.typescriptlang.org/play/#code/M... - ThreadSky

haz.dev • 96 days ago

TypeScript tip: Instead of using `filter(Boolean)` to remove null and undefined values from arrays, create a type guard function. 👇🏽

https://www.typescriptlang.org/play/?#code/MYewdgzgLgBAhgJwTAvDA2gRgDQwEy5gCuANibkWACYCmAZgJZg1W4DMAugFAD0PMAmAD0A-Fy6hIsRAjyp4SAHSMSUGggAUAIRAgSNOGACUvfoNHi6lYFAbgYYcADlSJOACN9AHgAqAPg0ANzgSIhoALhgfI0jg0JoYBggYJ2dXD29-GABvLgEEGigiBDAYOLCYAEI0YjIuAF9xSWgFBDZ5GWUGVXUNRzAXMgyaEz5BYTEgA

Comments

arongriffis.com•96 days ago

Interesting use of NonNullable. This is what I have in my projects:

type Nullish = null | undefined
const nullish = (x: unknown): x is Nullish => x === null || x === undefined
const notNullish = (x: T | Nullish): x is T => !nullish(x)

mattpocock.com•96 days ago

Should work without the annotation since 5.5

chance.dev•96 days ago

You sure? Is there a config flag required to change the behavior?

blvdmitry.me•96 days ago

I guess it works if you explicitly check for the value now but not with Boolean

haz.dev•96 days ago

I think Matt was referring to the `value is NonNullable` part.

chance.dev•96 days ago

Yeah, only seems to be the case if you pass an inline function. Makes sense I guess since the return type is probably inferred based on the filter overload. https://www.typescriptlang.org/play/?ssl=17&ssc=10&pln=17&pc=23#code/KYDwDg9gTgLgBAYwgOwM7wJY2AW1XAXjgAoBtARgBo4Ama5AVwBsnqAGAXTgEN8k0YASgB0AMwxNsUYgCEIEJsG7JBAbgBQoSLEQp0cLLlQ1CJCtTpxGLdl166BI8ZODSMqAHIQYH5k24ARopqmuDQ8Pz6hngAzKZkVLT0frY8fHpCYhJSxMQAboKEAHxweXAAhETWTCHqotAkkZjYOHAQogYtqIUA3upwAw764iDAACam0cIwEABiGKNjxILqAL7qdQ3ETZ24bR3Rxr39gzsj45Mt03ML48trG-VQjRm7re1vqDHHg0Pw5xMiFMZvNFvd1nUGMgEDAMCgDJ5vL4WIFFPluEwGMAAFxwKEAa2QEAA7io4H1flBgDAGFBkKUMViKlU-BpVkA

chance.dev•96 days ago

(very nice improvement no less!)

chance.dev•96 days ago

Seeing now that it works with the non-inlined version so long as you make it generic 👍 https://www.typescriptlang.org/play/?#code/KYDwDg9gTgLgBAYwgOwM7wJY2AW1XAXjgAoBtARgBo4Ama5AVwBsnqAGAXTgEN8k0YASgB0AMwxNsUYgCEIEJsG7JBAbgBQoSLEQp0cLLlQ1CJCtTpxGLdl166BI8ZODSMqAHIQYH5k24ARopqmuDQ8Pz6hngAzKZkVLT0frY8fHpCYhJSxMQAboKEAHxweXAAhETWTCFa4Q5R2HgALPHmSVYpcJxpDZnOOe5ePn6BijLAMFIh6qLQJJGYTXAQogZNqIUA3upwe31w4iDAACam0cIwEABiGMcnxILqAL7qs-PEi+u4K2vRxttdvsvkdTucmpcbndTo8Xm85lAFhlvjhfijUDFAfsDqCzkQLldbvdYa93ojPsjomj-s0scDkbjwbhIUSYU9SaIGMgEDAMCgDJ5vL4WGNgPluEwGMAAFxwLkAa2QEAA7io4DtsVBJgwoMhShKpRUqn4NByuTy+XqhkLRkFgBMpq4ADwANSK4slMrgLrpey1MB1eryBuARs6LFNQA

haz.dev•96 days ago

Oh, good to know.

haz.dev•96 days ago

It works with JSDocs too:

haz.dev•96 days ago

As @mattpocock.com mentioned in the replies, the `value is NonNullable` annotation is optional.

You can even inline the function:

arr.filter((value) => value != null)

Posting Rules

Be respectful to others
No spam or self-promotion
Stay on topic
Follow Bluesky's terms of service

Comments

Posting Rules

Reply