I Can't Believe I Didn't Know these Typescript Hacks

If you are a Typescript beginner or advanced developer, in this video we'll go over some Typescript hacks I can't believe I missed on my career that would make your life easier as a developer.
🎉Our Newsletter is live! Join thousands of other developers
islemmaboud.com/join-newsletter
⭐ Timestamps ⭐
00:00 Intro
00:10 Hack #01
03:55 Hack #02
08:10 Hack #03
-- Special Links
✨ Join Figma for Free and start designing now!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-...
⚡️ S.O.L.I.D Principles implementation in React ✨
github.com/ipenywis/react-solid
📕S.O.L.I.D blogs get a better grasp on the principles
/ the-s-o-l-i-d-principl...
-- Special Links
✨ Join Figma for Free and start designing now!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-...
-- Watch More Videos
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
• Debug React Apps Like ...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQ...
🐦 Follow me on Twitter: / ipenywis
💻 Github Profile: github.com/ipenywis
Made with 💗 by Coderone

[@ovistoica]

There already exists a Await or Awaited utility type in Typescript that does hack #1 but it still is a cool example to show Infer.
I liked that

[@gryg666]

Thank you very much for the last one. Comming to typescript word was hell without it.

[@rishiraj2548]

Great thanks!

[@Thassalocracy]

Thank you 😊

[@alexanderkomanov4151]

Thanks a lot!!

[@rickjarr]

Nice one! Btw. what's the vscode theme you are using?

[@ThanhNguyen-ho7yo]

May I ask the extension of VSCode you use to display the blur text "newTab" in line 8 in 6:40 minutes? Thanks!

[@CoderOne]

What do you mean by the blur text?

[@RiadhTube]

Hi Islem, hope you are doing well, may i ask you from where have you bought your chair,,, i am from (19 lol) as well

[@coolemur976]

#2
Why not just use type Tab = 'dashboard' | 'home' | 'about'; function switchTab(newTab: Tab) {} ? Is there a difference ?

[@remmoze]

when you need to add another tab, you have to modify multiple places instead of one
and it's easier to make human mistakes when you separate your logic

[@CoderOne]

Adding to what @remmoze said, We should use an Object instead of a Type tab = "..." because an object can be used programmatically (at runtime) to access different tabs and a type cannot, a type, can only be used to determine the type at compile time and to help us write better code.

[@coolemur976]

@@remmoze Type is defined in single place tho in example I've provided... Furthermore, in video you have object which has key-values with repetative keys and values ( dashboard: "dashboard" )

[@coolemur976]

@@CoderOne Isn't compile time type check enough tho for tab switch (or is this just in this example)? And isn't it better to pass simpler type to a function - simple string instead of object? Why is it better to pass object than primitive type to a function ? Doesn't that just make fn overcomplicated in this case?
I am assuming here that switchTab fn implementation would be case by literal string, which would make selected tab active and some content displayed...

[@oscaryiudev]

I use componentProps…

[@TheAlphaGames]

I like this video but these aren't "hacks"
They're type level typescript using the functionality as intended. Lesser known functionality, but still used as intended here. But maybe the title is just for the algorithm. I just don't want people thinking this isn't how its meant to be used but it somehow accomplishes this outcome. Because in reality, this is how its meant to be used at an advanced level.