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 })
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!
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 ?
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.
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.
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
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?
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.
In my case Typescript won't show a warning even if i omit the "person is Employee" predicate in the "isEmployee" function definition. When i hover over the person objects in the forEach function it shows correctly the types as if it has checked the isEmployee function. And compiles fine. Is this an addition to the new Typescript release?
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?
there is some good news , now you do not have to write " variable is SomeTypeName" because TypeScript does that for you (i have just checked , there was an update apparently )
Spend last 2h trying to figure out from documentation and chat gpt talks why does it always work even without 'xx is Xx' predicated. Came here to confirm. Tnx for comment.
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.
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
"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.
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.
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.
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?
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
})
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
@@big-jo89 We have a linting rule to always use tripple equals, so that's why I check for both.
@@bvx89 oh, I see
It doesn't filter null and marking the parameter as optional is misleading. The correct type would be `value: T | null | undefined`.
@@piaIy True, I should change that. The point still stand though.
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!
Afaik, this is actually called a type guard. A very important notion indeed 😊
The "person is Employee" bit (the return type specifically) is called a type predicate
Your video about the type predicates is more worth thousand times than the official document.
This man really simplifies everything in web dev. Great content. Just love it. ❤️
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 ?
The TS website doesn't do a good job explaining this, but you did! Thanks!
Great!! Just welcome again!!
That's a really cool feature but the OOP dev inside me want's to scream 😂
I'm watching in absolute horror
Why? If I may
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.
How about narrowing using switch case ? how should I return the exact type for multiple cases ?
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.
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
Zod may help
Thanks, man, very interesting as usual.
User-defined type assertion functions using `asserts` would be a great addition to this video, since it can build upon this predicate function.
Very useful..thanks
this TS tips are amazing
What about using instanceof?
The array doesn’t contain instances, just objects with some fields.
why not an enum with user and employee?
Thanks!
you saved my life !
This is excellent! Thankyou! I didn’t know about this one ❤
Great video! Thanks Kyle as always 💯
Brilliant. I've been wondering about this!
Amazing! Bro
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?
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.
@@Pacvalham thank you!
Isn't this kind of getting into runtime type checking? For that I prefer to just use Zod.
In my case Typescript won't show a warning even if i omit the "person is Employee" predicate in the "isEmployee" function definition. When i hover over the person objects in the forEach function it shows correctly the types as if it has checked the isEmployee function. And compiles fine. Is this an addition to the new Typescript release?
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.
Thanks
Hello, what is the use of Typescript, since the browser uses JavaScript?
To check when coding if you're doing mistakes
It adds types. Better than plain js in any way possible.
Typescript is for the developer's use
'the hair' strikes again! :) i didn't know this! good video!
Can you also cover type assertions? (asserts person is User)
Handy when you have nested union types
Great!
You can make the argument type only User btw
But how to use it with 3 or more types? Is there a way of doing that clean?
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?
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
how does this help, if the helper function is some common util functions that's used for several purposes?
well, it means you will need to 😃create 50 of it. typescript is a mess and overly complicated even for simple things
I failed to see why I would extract "is Employee" into a function called "isEmployee"?
Syntactically this looks horrible.
there is some good news , now you do not have to write " variable is SomeTypeName" because TypeScript does that for you (i have just checked , there was an update apparently )
With TS 5.5 we'll no longer need to explicitly add `:person is Employee` 🚀
Spend last 2h trying to figure out from documentation and chat gpt talks why does it always work even without 'xx is Xx' predicated. Came here to confirm. Tnx for comment.
also array.filter is not smart enoght so you need to use type guards.
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.
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.
❤❤🤓
Ducks can swim, just sayin'
even worse: rename email and "email" in person doesn't get refactored...
Not using typescript solves all typescript problems.
a lot developers realise this and it changes their lives
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.
No programming, no errors.
Good luck building anything more complicated than a todo list
@@otis3744 you sound like a dev that documents each of their function params with JS Doc
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.
Again, without semicolons...
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
name a big project leaving ts back to js?
@@doobtom271 svelte
"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.
Basically looks like a little hack. I love it anyway, idk why
Typescript is becoming weird everyday😢
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.
This is not advanced typescript. This is code pollution. Imagine someone else has to understand all this shit with a bigger example than this.
When coder works for the sake of the language, what a waste of time
Learn rust
а по русски?
sorry никто не по русский говорить😃
You're good enough but too fast, too. Take a rest and talk. People need to grab too what you're saying. Thanks. 👍
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.
Can't see code from mobile
//@typescript ignore
This is why duck typing sucks and is why I will never like TypeScript.
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?
isnt better use instanceof? if (person intanceof Employee){ persona.email}
This is type script and the typescript-eslint will still throw an error if you use that.