Senior Typescript Features You don't Know About - clean-code

If you are a fan of Typescript and have been using it for quite some time or you're just starting out with Typescript. In this video, we'll cover the senior features and techniques you should know about a web developer to write cleaner code.

⭐ Timestamps ⭐
00:00 Intro
00:54 1. Advanced Types
03:42 2. Discriminated Unions
07:33 3. Type Guards
10:50 4. Utility Types

-- Special Links

✨ Join Figma for Free and start designing now!

👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨

🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

🧭 Turn Design into React Code | From prototype to Full website in no time

🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with smooth Animations

🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app

🧭 Introduction to GraphQL with Apollo and React

Made with 💗 by Coderone

[ExoMemphiz]

Nothing really senior about this, tbh. Was thinking maybe you'd go through recursive types, but "readonly" as a built-in utility type, together with the other types, type branding and type guarding are definitely not senior-level stuff.

[twothreeoneoneseventwoonefour]

Not a typescript feature, but a javascript one, but I found that surprisingly not many people know about/use "??" and "??=" operators. They are very useful for dealing with default values when something can be undefined(you run into this situation frequently). People tend to use || and explicit =, but it isn't really recommended. || is going to trigger any falsy value, so even if it is 0 or "", it will short circuit to the right value, when ?? is only for undefined and null - which is exactly what you would want in 99% of cases.
I knew about this feature from a long time ago, but it actually made most sense when I wrote some dart(flutter) code. There, the || and && operators are used only for actual boolean values and there is no concept of "truthy and falsy values", so you need to use ?? operator there, which made perfect sense to me. Since then, I no longer use || and && for dealing with undefined values. Except in some jsx where I still use && though(but that is different).

[nikkodelossantos]

Awesome tutorial!!!! Liked and Subscribed!

[abolfazljalildoost]

Dude awesome. loved every minute of it

[macr]

Those are definitely not "senior" typescript features - those are a little bit more advanced, but still basic features (still very useful, especially discriminating unions).

[Vetal-dcir]

Really cool video, I am going to rewatch minimum once for push all this information to my brain 🧠 branch 😅 Right now I am watching your another video with same theme - cool job ‼️

[kirolosmahfouz]

Great video keep upload this kind of videos

[joelinman]

in your 'Advanced Types' section at the beginning. Are the props converted from string types into read-only types? as that is what it suggested when you hovered over 'props.title'.

or do they stay as strings that extend the read-only type. I'm wondering if there are any issues that could be come across by setting a strings type to readonly other than trying to edit the string itself.

[lasindunuwanga]

When I saw the senior thing in the title I knew it is gonna be junior thing
Senior or junior don’t reinvent the wheel
Just google what you want to do, there is probably some way to do your 10 lines code in one line unless you are doing some rare thing no one has done before
For typescript, there is something called utility types. Check them. They are pretty handy

[Muhammed-nani]

Long time no seen, wlc, or maybe it’s me

[ThanHtutZaw]

Just a tips for beginners . when passing props with typescript, I use vs code tools that can fix infer types automatically .
After passing props, I don't destructure it and I only write export default function App(props) . So I can click the props and ctrl + . vs code can fix type issue .
Not exactly but I like to use it because I don't have to write prop types manually. Then we can adjust type what we want.

[blaaaabla]

We have the `Readonly` utility type built-in and we don't actually need to type it's functionality manually.

[lucaslevandoski]

Hey man, that is really nice, why don't you do a PR to add the readonly thing to actual typescript repo instead ?

[ChimbzZ]

I love your tutorials 🫶! But to be fair, the title is misleading. These aren’t “senior” features. I’d say beginner to intermediate.

[LarsRyeJeppesen]

It's a pity you're a React-only channel, otherwise great channel

[noNullMoments]

😅 the variables called a generic captain

[JEsterCW]

I'm sorry, but the first example only showcase how you don't realize that you don't really need that generic at all, lol....no offense buddy, but it sounds funny cause it's totally clickbait thing at this point, since its bad, not senior-like. Maybe senior over there where youre worknig at is at this level, but definitely not worldwide, but from what i have seen you never ever worked at any serious company and you only do freelance stufff, so ye lol.

Really good video tho, kinda WebDevCody vibes :)

[bhumit]

1) It won't work for deeply nested objects. and I am leaving the video.

[Tarabass]

Saying that the switch statement is part of a senior solution is very strange in mine opinion. Switch statements are code smell and should be avoided if possible..