Type Predicates Solve This Common TypeScript Error

TypeScript Simplified Course: courses.webdevsimplified.com/...
Type predicates are an interesting feature in TypeScript since they cover a very niche use case that can cause type errors if you are not aware of this solution.
📚 Materials/References:
TypeScript Simplified Course: courses.webdevsimplified.com/...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:17 - The Problem
02:12 - Type Predicate Basics
03:15 - Type Predicate Problems
#TypeScript #WDS #TypePredicate

[@bvx89]

In all my TS project I add this utility function: function isDefined(value?: T) value is T { return value !== null && value !== undefined; } It's very useful when I have a list of items where some of those items might be undefined: list.filter(isDefined).forEach(item => { // `item` is now correctly inferred to not be undefined or null })

[@big-jo89]

nice one, and correct me if I'm wrong, but I think you can just do : return value != null; this way it should check for the null and undefined values

[@bvx89]

@@big-jo89 We have a linting rule to always use tripple equals, so that's why I check for both.

[@big-jo89]

@@bvx89 oh, I see

[@piaIy]

It doesn't filter null and marking the parameter as optional is misleading. The correct type would be `value: T | null | undefined`.

[@bvx89]

@@piaIy True, I should change that. The point still stand though.

[@gameraz1990]

I happened to run into this very same issue just a week ago, and learned what you're teaching, and made great use of it. Now you teach it with a sweet simple example, further cementing my knowledge of the subject. Great job man!

[@kaushikchopra3149]

This man really simplifies everything in web dev. Great content. Just love it. ❤️

[@jx4172]

This is excellent! Thankyou! I didn’t know about this one ❤

[@theisoj]

Great video! Thanks Kyle as always 💯

[@Duckception]

Brilliant. I've been wondering about this!

[@Niksorus]

Afaik, this is actually called a type guard. A very important notion indeed 😊

[@dstutz]

The "person is Employee" bit (the return type specifically) is called a type predicate

[@_nikeee]

User-defined type assertion functions using `asserts` would be a great addition to this video, since it can build upon this predicate function.

[@anibalsancheznuma3133]

Thanks, man, very interesting as usual.

[@ThaiNguyen-gg8xj]

Your video about the type predicates is more worth thousand times than the official document.

Great!! Just welcome again!!

[@macigli]

That's a really cool feature but the OOP dev inside me want's to scream 😂

[@gonzo191]

I'm watching in absolute horror

[@eminvesting]

Why? If I may

[@semosancus5506]

Yeah I agree. I'm just learning javascript and typescript, but come from Java / Kotlin background, and I thought "what in the heck ???" Somehow this magic code infers a type when the boolean function returns true and infers some other type when it's false??? So bizarre. Typescript kind of checkmated themselves with their type inference rules.

[@el.bromas]

Amazing! Bro

[@drprdcts]

Can you also cover type assertions? (asserts person is User)

[@beats4all914]

this TS tips are amazing

[@mohammadkhayata2042]

you saved my life !

[@mmanomad]

I'd love to see some videos on Deno's fullstack Fresh framework! I think it's a great alternative to Node.js frameworks such as React and Next.js.

[@ryzott]

How about narrowing using switch case ? how should I return the exact type for multiple cases ?

[@lasindunuwanga5292]

Thanks

[@snake1625b]

Handy when you have nested union types

[@olegdeviatko4956]

Great!

[@dazecm]

I’m still learning typescript but I’m wondering if using interface instead of type for User and then using type inheritance for Employee would also solve this issue?

[@JediMediator]

Isn't this kind of getting into runtime type checking? For that I prefer to just use Zod.

[@nomadshiba]

You can make the argument type only User btw

[@yassinmoussaoui3323]

why not an enum with user and employee?

[@Thassalocracy]

I think object design patterns also play a role here. The shape of the data object should be consistent for all persons. If the person is merely a User then he/she should still have an email key of "null". Then assign NonNullable to Employee's email type. I don't like using "as" or "is" as it could cause unintended bugs like shown in the video.

[@stevezelaznik5872]

If I’m using a 3rd party API typescript can’t do anything about that. All I can do is cast it in Typescript and provide a runtime check that the API response is in the shape I expect

[@birthdayzrock1426]

Zod may help

[@benjaminjeschke]

I dont understand. isEmployee() returns a boolean. So I would write: isEmployee(person:User| Employee): boolean. Where do I write the boolean return type in your example ?

[@aless.c064]

What about using instanceof?

[@martijn3151]

The array doesn’t contain instances, just objects with some fields.

[@MrJettann]

But how to use it with 3 or more types? Is there a way of doing that clean?

[@sandrinjoy]

how does this help, if the helper function is some common util functions that's used for several purposes?

[@gidmanone]

well, it means you will need to 😃create 50 of it. typescript is a mess and overly complicated even for simple things

[@henrikholst7490]

I failed to see why I would extract "is Employee" into a function called "isEmployee"?

[@nasirmuslih4128]

Please i have a little question with HTML and CSS how can i send it so that yiu help me with ut please if possible

[@aurelian3401]

Hello, what is the use of Typescript, since the browser uses JavaScript?

[@eresy.5968]

To check when coding if you're doing mistakes

[@yoni532s9M5w]

It adds types. Better than plain js in any way possible.

[@markokafor7432]

Typescript is for the developer's use

[@orangeblossom9968]

can anyone please explain 3:38: why is it inferred that pesron will be of type never? Isn't it supposed to be Employee by what's returned from the guard function?

[@Pacvalham]

isEmployee takes a User or Employee, and Employee extends User (0:20), so if it is an Employee, it is a User. If it is not a User, it is also not an Employee, but that was the declared type in the param, so this condition would Never be reached.

[@orangeblossom9968]

@@Pacvalham thank you!

[@mahdijafaree5332]

also array.filter is not smart enoght so you need to use type guards.

[@uncleelder4922]

Why should I need an advanced course in typescript to write code that says a person is not necessarily a user? There has to be a better way.

[@PopHeige]

This is cool and all but I think its bad practice to make ”smart” code which in a couple of years will be suoer hard to read and understand.

[@fabio-nettis]

Syntactically this looks horrible.

[@Caldaron]

even worse: rename email and "email" in person doesn't get refactored...

[@Spadeads]

Basically looks like a little hack. I love it anyway, idk why

[@aeronwolfe7072]

'the hair' strikes again! :) i didn't know this! good video!

[@keremardicli4013]

I am afraid typescript is getting out of control and this is why big projects start to leave it. İnstead of focusing main codebase, you try to solve type problems most of the time. It feels like playing hide and seek with types and js

[@doobtom271]

name a big project leaving ts back to js?

[@keremardicli4013]

@@doobtom271 svelte

[@XTANCE]

"Type problems" - typing your code is not a problem as it saves a lot of time later when you need to debug. I am not sure how a big project would work without TS or at least JSDoc.

[@chrisbirkenmaier2277]

Typescript doesn't really make it easy to write clean, modular code. The more you pull out code into own modules and functions (instead of writing linear inline code), the more you have to handle types manually and help typescript infer the correct types, making the whole experience worse and error-prone.

[@coc1841]

Ducks can swim, just sayin'

[@kasratabrizi2839]

I really like this video and I totally get the solution but at the same time, it goes to show you why some people hate Typescript. In this small example, you have to add all of these stuff, just to make things work which shows that FE development is going in the wrong direction. I really believe we as a community need to come up with a better solution (maybe even use the help of AI), to simplify all of these stuff. Otherwise, we need to hire full time Typescript developers just to be implement and to find and fix bugs. One of my colleagues is working at React project with Typescript and he decided to remove typescript completely as it was making everything way more complex than it should have been.

[@xxXAsuraXxx]

Soon, no developer problems only AI problems

[@sanan4li]

This is not advanced typescript. This is code pollution. Imagine someone else has to understand all this shit with a bigger example than this.

[@mahmudadamusman8264]

Typescript is becoming weird everyday😢

[@7heMech]

Not using typescript solves all typescript problems.

[@otis3744]

a lot developers realise this and it changes their lives

[@arshiagholami7611]

Good luck writing production ready apps and libraries. you probably have to waste half your time writing tests that can be solved by just using TS.

[@bryson2662]

No programming, no errors.

[@ts3798]

Good luck building anything more complicated than a todo list

[@arshiagholami7611]

@@otis3744 you sound like a dev that documents each of their function params with JS Doc

[@uncleelder4922]

The real problem here is not Typescript. The real problem stems from the object-oriented programming paradigm in general. That's why the problem can't truly be fixed with the Typescript language. In fact, several languages have come up with clever but futile ways to fix this type of problem, but the only real solution is to avoid objects (aka, types) in general.

[@gmoniava]

Can't see code from mobile

[@user-su4rq2dt2r]

а по русски?

[@gidmanone]

sorry никто не по русский говорить😃

[@dayachettri5157]

Learn rust

[@walkingin6375]

//@typescript ignore

[@drelroy]

Again, without semicolons...

[@ashique12009]

You're good enough but too fast, too. Take a rest and talk. People need to grab too what you're saying. Thanks. 👍

[@ElPolemista]

When coder works for the sake of the language, what a waste of time

[@CottidaeSEA]

This is why duck typing sucks and is why I will never like TypeScript.

[@user-pq8zg6rx8c]

Hi there, devs! I have a question that am struggling at for about a week. I know it doesn’t reference the video topic, but I appreciate all help you can give. I am doing react(vite) Frontend on my job. There is a task to implement Notifications in browser(even when it’s in foreground). So I decided to use service worker for that. But then I run into issue: I subscribe for event source, that sends me messages. It requires authentication token, so I use @microsoft/fetch-event-source to specify token. So I can’t simply import that library in worker since it doesn’t support import. What should I do? Maybe there is any better solution for handling notifications without loading main thread?

[@joanstacco12]

isnt better use instanceof? if (person intanceof Employee){ persona.email}

[@thebeastsclips]

This is type script and the typescript-eslint will still throw an error if you use that.