Typescript Mistakes Every Junior Developer should Avoid | clean-code 

The most concise explanation of `unknown` vs `any` i know of: - `unknown` is the union of every type there is. - `any` is the "elastic" type which fits to what it needs to be. (It may also be thought of as the switch to selectively disable type checking) bonus point: `never` is the union of no type.

Awesome tips! I have been working with typescript for few weeks, almost all pf the tips you mentioned I needed them at some point.

Good stuff man. Been in the field for 4 years. Ive only known half of the things u mentioned. Awesome to learn something new today 😄

All explanations were clearly and consistent, with perfect examples

I agree that you don't want to use "any" but if you are a junior dev then you probably don't want to use "unknown" either. Chances are very high that you know what type or types are a possibility at compile time. In this case, instead of returning "unknown[]" the fetch should return "(IAdminUser | IUser)[]" or even just "IUser[]" and then check if the user is admin and cast to admin at that time.

This is pure gold. So clear and concise! Thank you!

This is great!!! I've been using typescript for a long time and learned something. Thank you!!

Great video, well explained… for all audience, I believe it will be easier to follow the examples if they are very bare or well slimmed down if you’re talking about the basics.

Some tips I knew but would not have been able to explain better than you ! Excellent video.

Look, using enums does not make you a junior dev. Enums don't make you anything. And also, yes you can directly pass a number instead of the enum, but that defeats the purpose of enums in the first place. The "junior mistake" is not using enums, but passing the enum value directly instead of using the enum. Do you see the pattern? Using enums is not bad. Using enums the wrong way is bad. I've noticed that a lot of self proclaimed typescript experts on RU-vid talk badly about enums. But that just proves that you are junior devs yourselves. Don't blame a language feature, when you misuse it...

Thank you so much this tip will adjust my type annotation in correct way to avoid using explicit any type

#4 - enums, I understand what your saying about using number enums, but if you misspell one of them and want to rename it, VScode would change it throughout your app. however for "GoodState" and using strings |string |string, if you change the string of the first one, then I don't believe VScode will update the string everywhere.

This was great, I learned so much in this video. Thank you!

12:49 Fun thing is here, using satisfies keyword along with Record would be a good idea too, because for the red property, without satisfies (so color: Record = {} ) you will only have the common methods/properties between arrays and string, such as .length etc ... I'm pretty sure I saw this exemple in the documentation for satisfied :D

Thanks. So much to learn 😊

The "isAdminUser" method should take "IUser", not "unknown". If you are worried that you will not get an IUser from your endpoint, use something like zod.

I used to make these mistakes 5 years ago. Thanks

Very practical tips. Thanks!

Mate this is so good! Definitely helped out this JS dev!

Learnt some new features that Typescript has that I wasn't aware of. The `satisfies` and `obj is Type` sections were nice to see. I've been using Typescript for 4 years, and never knew these existed, though, they may have been added more recently than my knowledge extends to (TS 2.4). I'm currently between jobs, so I'm taking my free time to catch up on technologies that I learnt prior to my most recent job.

4:17 why not assign IUser and then use the isAdminUser to make it more specific?

superb explenation very clear thanks a lot !

Great video! The first point at 1:00 does a great job on type guards, but doesn't really explain `any` vs `unknown`. Like at 5:03, code completion has nothing to do with `any` vs `unknown` and everything to do with the type guard. What `unknown` does a great job with is *requiring* that the narrowing happens before assignment. IOW if you change the code to use `any`, it will still work and the type guard will still allow completion. But it will fail to compile if you try to assign the unknown response to a user variable (whether admin or not) before that type guard. Just paste in the following in the typescript playground: interface IUser { id: number; name: string; foo: (s: string) => void; } /** * type guard would be better implemented like stated in the video, using `unknown` type. */ function isUser(obj: any): obj is IUser { // extremely naive checking here for illustrative purposes only if (typeof obj === "object" && typeof obj.name === "string" && typeof obj.id === "number" && typeof obj.foo === 'function') { return true; } else { return false; } } const obj = { id: 42, name: "Alice", foo: (s: string) => { console.log('foo: ' + s); } } obj.foo('const obj'); // compiles because tsc knows of the property on the object itself const anyObjDeserialized: any = JSON.parse(JSON.stringify(obj)); const unknownObjDeserialized: unknown = JSON.parse(JSON.stringify(obj)); // anyObjDeserialized. // no type completion because type `any` // anyObjDeserialized.foo(); // compiles but UNSAFE because we haven't narrowed the deserialized object. // (This actually throws at runtime because you can't deserialize functions like this.) // unknownObjDeserialized. // also no type completion because type `unknown` // unknownObjDeserialized.foo(); // unlike `any`, this SAFELY fails to compile let user: IUser; user = anyObjDeserialized; // compiles UNSAFELY because it's type `any` // user = unknownObjDeserialized; // SAFELY fails to compile, because it hasn't been narrowed if (isUser(obj)) { obj.foo('narrowed const obj') } if (isUser(anyObjDeserialized)) { // anyObjDeserialized. // YES code completion because of type guard anyObjDeserialized.foo('narrowed any'); } else { console.log('type guard worked! deserialized `any` isn\'t a user (because foo fn deserialized isn\'t a function'); } if (isUser(unknownObjDeserialized)) { // unknownObjDeserialized. // YES code completion because of type guard unknownObjDeserialized.foo('narrowed unknown') user = unknownObjDeserialized; // compiles because we have narrowed the unknown with the type guard } else { console.log('type guard worked! deserialized `unknown` isn\'t a user (because foo fn deserialized isn\'t a function'); }

Very helpful tips, I've learned a lot. Thanks :)

Excelent video totally understood 'satisfies', utility types and 'is', saved to watch untill I memorize.

I've been doing all these mistakes. Gonna fix them. Thanks alot.

Awesome video, thank you!

5:00 - There is no need to actually use 'unknown' in this example, I think it would be more correct to use the following syntax: const goodUser: IUser | IUserAdmin = await response.json() Now you explicitly defined the possible types (interfaces) without being too "generic" with unknown. You can also define an "error" type/interface, let's say "IError", and use a type guard "isIError()". Then: const goodUser: IUser | IUserAdmin | IError = await response.json()

thanks for this TypeScript tutorial. Love Typescript!

Thank you for sharing those amazing tips. :)

This was really excellent.

11:04 type on line 18 for enum on line 19. There is cool trick, you can auto generate type for enums. It can be for instance `type GoodStateType = keyof typeof GoodState` - GoodState is enum name

Great tips, thank you!

I didn't know the thirs one, super interesting letting typescript to infer the type. Memoizing it😊

title recommendation: "typescript mistakes every junior should make at least once"

thank you. now i know typescript can satisfy Operator

@CoderOne what is the extension causing the function names to stick to the top when you scroll?

thanks for this video, it was very informative. i don't like the idea of the custom type guard functions, they introduce possible runtime errors since you could write the wrong logic to determine the type, so i think they should be avoided when possible.

Amasing! Thanks for sharing!

`satisfies` Operator is indeed awesome. Thank you for the tips, I learned a lot!

Very well done 👍

The "satisfies" keyword looks really cool. I wonder if it can be used for an implicit cast. The "pass 100 into the enum function" is a thing from a horror. This is C# levels of bad. Does that still happen will all strict modes being turned on?

Such a banger video ngl, thanks!

Lots of great content on this channel. Take my money.

Nothing of this makes you a senior dev. It takes so much more

is there any difference if I change to: function isAdminUser(object: unknown): object is IAdminUser { return Boolean(object?.token); } ?

thank you, that awesome!

Appreciate the tips and the video. Some constructive criticism: Take a breath once in a while (or don't edit video so it feels like you don't) There really isn't much time for the viewer to absorb your points before you are half way into your next one ;) Otherwise good video. Plenty of self-taught mistake patterns in web-development, nice to know what to look out for :)

Morning with this ❤

I'm super new to TypeScript, but I use all the tips you just mentioned. Does that make me a senior developer?

Thank you so much!!

I am not a Typescript fan. I don't hate it but I definitely don't love it. Stuff like this is why. This is all very helpful but that aside from the unknown types and enums most of this doesn't pop up in other tutorials and training. Granted some are recent features but you have to be deep in the weeds of Typescript and frankly I've personally seen no significate benefits using Typescript that's made me want to take such a deep dive. I don't mind learning new things but I was doing fine without it.

I wish I could know these tips sooner

That was helpful, thanks

i loke alot all those tips, also the enum is a good one and the one i most use for strict declarations

Nice Tipps 👌 If I'm not totally wrong, you're confusing intersection (& operator) and union (| operator).

Thank you for really useful tips !! By the way, I just wonder why you named IUser, IAdminUser types intead of just User, AdminUser?

Good advices ❤

thank you so much I liked the theme you're using, what is it called ?

A better alternative to enums is using a javascript object as const.

what vscode theme u use?? it look goood

These are pretty subjective tbh. There are a lot of use cases where any or enums are a better choice.

Hi! Is this VS Code? What extensions are you using to make it look so good? :D

Thank you so muchhh

real good one!

What color theme on a video?

thank you🎉

The I prefix you use with interface is obsolete for quite a while now

Thx a lot for the video! Which VS Code theme do you use?

What is the theme used in VSC?

great video. would help if you talk slowly or maybe have some transition in between the tips or just maybe pause for two seconds in between. thanks for the video!

1:06 that’s why it’s called unknown

how to change intellisense icons?

Please consider to do a MERN and typescript advanced real-world project tutorial

Wow, I'm impressed. You really know your stuff and explained this in such a great way. Thank you!

Thanks

thank you

const {} as const is preferrred over using enum entirely

if u tell p = cat why you have to check it if its a cat? are you doubting it? sorry im new at programming

1. Understand the "unknown" type in TypeScript to avoid bypassing type checks and compromising code reliability. 2. Avoid using "any" type as it disables TypeScript's type checking, leading to potential errors and decreased code quality. 3. Utilize type guards effectively to determine the type of a variable dynamically, enhancing code readability and reliability. 4. Refrain from relying solely on enums with implicit numbering, as it can lead to ambiguous code and decreased maintainability. 5. Make use of built-in utility types like "Partial" and "Omit" to enhance code clarity and avoid unnecessary complexity in TypeScript development.

Enum are good even with numerical values as long as you do 2 things : - Explicitly set the numerical value - Make them "const enum" regardless of the enum being numbers or strings. The satisfies operator is horrible. You should be able to write it as const goodUser: satisfies IUser = { ... } Or at least const goodUser = { ... }

What you got there, you said you use for all of your type declarations type MyVar = { myKey: 'myVal', myKey2: 'myVal2' } const myVar: MyVar = { myKey: 'myVal', myKey2: 'myVal2' } Is making you do twice as much work when changes to myVar come. First in type then in object itself. You could nicely avoid it like this const myVar = { myKey: 'myVal', myKey2: 'myVal2' } as const type MyVar = typeof myVar It's the same thing except now you'd work as you normally would with JS objects but with read-only types Please don't bash junior developers with such video titles Happy holidays everyone!

11.20 why not to use Const BetterState = { Asd:”123” } as const

"Property has no initializer and is not definitely assigned in the constructor" i got these error many times, how to resolve these errror?

is unknown like template?

Good stuff!

7:31 it is rather asserting than casting

string | ICustomImage is not types' intersection, it's an union

Diff between as Vs satisfies?

I always forget the is keyword is a thing. My main take away from this video is I need to use the return type : T is R more.

Whats the VS color theme??? Edit: it's Halcyon.

useful!

Whats the font?

Simply mean turn of the Typescript "type-checks" " Someone is junior English ;)

Not using satisfies is barely a Junior Dev mistake. It literally got introduced in the latest release of TypeScript and thus does not yet work in any of my projects. Also obligatory comment about how every youtuber bashes enums because it's the cool things to do and ignores the existence of `const enum` which literally fixes 95% of issues related to enums.

At the end of the day, the panel who hires you determines if you're junior or senior.

nice content!

The Omit one is great, also yeah, who could be stupid enough to think using numbered enums is good, either you name them with string or don't use them. \

Bro Your Products icons name.?

great content