7 Awesome TypeScript Types You Should Know

  Рет қаралды 93,804

Josh tried coding

Josh tried coding

Күн бұрын

These have saved me so much time in building out my apps, so I thought I'd share them with you. Hopefully they'll save you just as much time and nerves instead of figuring out all this yourself lol.
Matt Pocock explaining the Prettify Type: • Prettify for Classes
-- my links
Next.js SaaS: www.splitter.gg/
Discord: / discord
GitHub: github.com/jos...

Пікірлер: 99
@sire_ns
@sire_ns Жыл бұрын
I'll always appreciate these TS videos any day of the week
@kendanieleramiscal4923
@kendanieleramiscal4923 Жыл бұрын
Another Typescript type, which is not included in the video, is the Pick type, which is the opposite of Omit. Instead of Omitting the property, you include the properties to be picked.
@DevoidFX
@DevoidFX Жыл бұрын
The Prettify type should not exist. It should be a typescript configuration option.
@maxk5540
@maxk5540 Жыл бұрын
it is good until you are really need to have an object
@xinaesthetic
@xinaesthetic 9 ай бұрын
The semantics of what the higher level types are defined as is relevant information.
@timderks5960
@timderks5960 Жыл бұрын
Man, there's a LOT of information in here I never even heard of, but is pretty much exactly what I need, super cool. This would be a great video to add chapters to btw: 0:00 Intro 0:18 typeof / keyof 1:21 ReturnType / Awaited 2:59 Prettify (and nesting) 4:07 Partial / Required 5:58 Omit / Exclude
@froxx93
@froxx93 Жыл бұрын
The exclude util is not necessarily used for more complex types. It's for excluding types from union types in general instead of omitting props from an object type. So you could also use it to exclude e. g. string literals
@kesoBJJ
@kesoBJJ Жыл бұрын
updateTodo example has a bug... you need to prefix fieldsToUpdate with ... if you want to override the todo, otherwise you will create an object with additional fieldsToUpdate property, which contains the values that should be used for updating.
@dominikrodler8010
@dominikrodler8010 9 ай бұрын
One of the rare examples where a rather clickbaity sounding video really delivers 👍
@BeeBeeEight
@BeeBeeEight Жыл бұрын
I'll never understand why interfaces hide their fields like it's something shameful lol. That Prettify type will save millions of developers including me.
@julian_handpan
@julian_handpan Жыл бұрын
Bc it’s and interface 😂 not and object…
@mandokir
@mandokir Жыл бұрын
Javascripters trying to understand object orientation.
@Netrole
@Netrole Жыл бұрын
It used to be that way. But people complained that it is confusing and convoluted to see the result of the union when a union of preexisting types is made, instead they wanted to see which types the union is made of.
@vitvitvitvitvitvitvitvit
@vitvitvitvitvitvitvitvit Жыл бұрын
​@@Netrole what hellll. i think would be pretty usefull show the type and your fields. Like: title: string; description: string; role: Role < { name: string, i id: number } >
@tylim88
@tylim88 Жыл бұрын
it is useful in creating branded type
@Nabulio85
@Nabulio85 Жыл бұрын
Great explanations, very well illustrated. Thanks
@ravinrod
@ravinrod Жыл бұрын
Wow! These are good TypeScript tips. Thank you!
@chrise.3114
@chrise.3114 Жыл бұрын
Great stuff Josh! Please never stop posting new content!
@GambitVil
@GambitVil Жыл бұрын
Really nice, short but with so many good and important things video.
@shreyas0924
@shreyas0924 Жыл бұрын
We need more videos like these!! Great video buddy
@lakhveerchahal
@lakhveerchahal Жыл бұрын
These are super cool tips. Thank you for sharing them
@aselivra
@aselivra Жыл бұрын
Fantastic video, simple, well explained and to the point. Great examples 👍
@rahimco-su3sc
@rahimco-su3sc Жыл бұрын
thanks a lot , we are constantly learning from your videos ! ,keep going
@ahmedkhairydev
@ahmedkhairydev Жыл бұрын
Great types, you just forgetting `Pick` 👀
@luccaparadeda1985
@luccaparadeda1985 Жыл бұрын
Great video as always
@petarkolev6928
@petarkolev6928 Жыл бұрын
Wow! Thanks, Josh 🍻🍻
@solosdev6946
@solosdev6946 9 ай бұрын
Thanks Josh helps alot for us :D
@njihiamark6926
@njihiamark6926 Жыл бұрын
great stuff Josh!
@HG-wu6eb
@HG-wu6eb Жыл бұрын
thank you let God bless you for your kind activity
@carlosricardoziegler2650
@carlosricardoziegler2650 Жыл бұрын
Great content :) I ❤ typescript
@harrycoveroriginal
@harrycoveroriginal Жыл бұрын
So useful thank you!
@syedareebhussain8436
@syedareebhussain8436 6 ай бұрын
Thanks Josh 🙌
@vorkosiganhs
@vorkosiganhs Жыл бұрын
Amazing tips!! Thx a lot!
@elliottchong
@elliottchong Жыл бұрын
Super helpful! Thank you :)
@nidhish6966
@nidhish6966 Жыл бұрын
This helped me a lot, Thanks !
@Leyksnal
@Leyksnal Жыл бұрын
The best thing i have learnt today
@kilo.ironblossom
@kilo.ironblossom 9 ай бұрын
Prettify is now a vscode extension
@JacksonDiKey
@JacksonDiKey Жыл бұрын
About Exlude is mind-blowing! Tnx
@vaibhav5783
@vaibhav5783 Жыл бұрын
This is more complex than learning rust or c or go. Anyway great video :)
@lanskaba3668
@lanskaba3668 Жыл бұрын
Our brother always take us from darkness to light . Thank you Josh 🙏
@abdulgaffarabdulmalik4333
@abdulgaffarabdulmalik4333 11 ай бұрын
Do you mean no matter how nested they are or no matter the number of Joins? Great video btw
@Geuni620
@Geuni620 3 ай бұрын
There's one thing I don't understand. Why do you put an empty object with Prettify's '&'? Wouldn't you get the same result without using the & operator...? I'm really curious! 😭
@huiz.5107
@huiz.5107 9 сағат бұрын
very helpful!
@arifulhaque3236
@arifulhaque3236 Жыл бұрын
That's tips & tricks of Ts is time saving❤
@arsenico-of3yn
@arsenico-of3yn Жыл бұрын
Josh, would be great if you make a video about the skills a junior developer should have to get their first job. THANKS 4 all your content.
@Blast-Forward
@Blast-Forward Жыл бұрын
5:46 Errr... and what will be the return type of updateTodo again? 😝 Looks like somebody forgot another spread operator: ...fieldsToUpdate
@DiogoScarmagnani
@DiogoScarmagnani 3 ай бұрын
Prettify is very good, nice tip.
@cookieman.19
@cookieman.19 Жыл бұрын
This tutorial is valuable
@Shuyinz
@Shuyinz 7 ай бұрын
Very useful!
@ManvendraSK
@ManvendraSK 5 ай бұрын
Exclude is not for complex types but unions.
@maxwebstudio
@maxwebstudio Жыл бұрын
Nice one ! Thanks !
@stasyanje4225
@stasyanje4225 8 ай бұрын
Being mainly a Swift developer I'm left shocked by TypeScript versatility
@raymondmichael4987
@raymondmichael4987 Жыл бұрын
Thanks buddy 😊
@LabhamJain
@LabhamJain Жыл бұрын
You should have added Pick as well since you showed omit
@jagdishpadeliya6050
@jagdishpadeliya6050 Жыл бұрын
Very helpful 🔥
@muradmesteliyev5651
@muradmesteliyev5651 Жыл бұрын
I wonder will you have a video about a project with bun?
@matthewbeardsley7004
@matthewbeardsley7004 Жыл бұрын
Yep, nice!! Thanks heaps!
@latch909
@latch909 Жыл бұрын
I’m a bit confused when writing a function in TS aren’t we meant to declare the return type in the function declaration? When would you need to infer the return type??
@DavidWMiller
@DavidWMiller Жыл бұрын
This question is kind of backwards. Why would you want to define it? If you can infer it, the types are done. Your code defined them. Manually defining is redundant extra work. There are cases where you might not want to infer them, but those are the ones you'd need reasons for, which is the opposite of your question.
@danieljanjanocha7178
@danieljanjanocha7178 Жыл бұрын
Let’s assume there is a function that returns an array of some kind of ingredients. In useState you want to declare that you want to keep array of some ingredients, but you start with an empty array. How to type the useState without knowing the return type of that function if you don’t wave the type specified elsewhere? It looks like an edge case but I can see a need for it sometimes
@gnack420
@gnack420 Жыл бұрын
​@@DavidWMiller no lol, declaring the return type is beneficial because a reader can see what the function returns without having to interpret the function.
@diegofernandocobacruz6508
@diegofernandocobacruz6508 Жыл бұрын
​@@gnack420Typescript shows you the inferred type when hovering the function name. No need for reading the code
@XxOsirisxX
@XxOsirisxX Жыл бұрын
@@diegofernandocobacruz6508 The IDE does that, not TypeScript. Open it on a notepad and hover it over.
@johnconnor9787
@johnconnor9787 11 ай бұрын
3:45 Matt Pockock is a TS Ninja. He has a great channel. So as I understand he contributed to TS and created this type?
@shubhamrawat7895
@shubhamrawat7895 Жыл бұрын
type Person = keyof typeof obj type Return = ReturnType Partial Required type Omitted = Omit
@response-status-200
@response-status-200 Жыл бұрын
Very greate video thanks
@meka4996
@meka4996 Жыл бұрын
I think you can replace all "interface" with "type"
@elormtsx
@elormtsx Жыл бұрын
awesome pretty helpful!
@tobiasnickel3750
@tobiasnickel3750 Жыл бұрын
I wonder IS prettify could make typescript faster. Maybe not self implemented but As A buildin type. Because of then could avoid looking up complex structures.
@TheIpicon
@TheIpicon Жыл бұрын
great video!
@realQuaz77
@realQuaz77 Жыл бұрын
This is not good. We are adding production code to augment IDE assists. I get why it exists, but this is something that should be supported by TS and the tool chain by default.
@simotasca
@simotasca Жыл бұрын
thats true one thing that can be done is "tsc --noEmit --incremental --watch" and that at least shows the errors in the console
@oumardicko5593
@oumardicko5593 Күн бұрын
A programming languague within a programming language
@IqtidarHussain-i6m
@IqtidarHussain-i6m Жыл бұрын
It is usefull to me thanks!
Жыл бұрын
Master
@T25de
@T25de Жыл бұрын
Fuck yea Nice one ☝️
@sammy709
@sammy709 Жыл бұрын
The first example doesnt make a lot of sense. Why would you want Person to be either the string literal "name" or "age"
@IneyeGabriel
@IneyeGabriel Жыл бұрын
It's just an example probably not the best one. But is super handy when you want to keep track of all keys within an Object or Enum
@sammy709
@sammy709 Жыл бұрын
@@IneyeGabriel I know the feature is useful, but the example makes it more confusing
@badrakhariunchimeg1031
@badrakhariunchimeg1031 5 ай бұрын
I won't you won't over
@alasassi5889
@alasassi5889 Жыл бұрын
Do u think ai will replace us one day
@laturdaily5110
@laturdaily5110 Жыл бұрын
ReturnType Awaited Partial Required Omit Exclude
@aashiqahmed5273
@aashiqahmed5273 Жыл бұрын
prettify is good one
@adriannuske
@adriannuske Ай бұрын
Just so y'all know: These things are just to "cope" with "inherited" old code. If you have any respect for your job and your future, you definitely should learn some architectural skills. Cheers
@RayZde
@RayZde Жыл бұрын
this is good to know, but you don't need any of this besides making things more complex and harder to debug.
@JakeAndDaddy
@JakeAndDaddy Жыл бұрын
Good content, but you need to slow down with the delivery. I'm an expert at other languages but only just kept up with it.
@SerhiiZhydel
@SerhiiZhydel 8 күн бұрын
Omg, typescript allows you to write so much shit code... why they add the tools for this?
@AlanMeile
@AlanMeile Жыл бұрын
& {} wtf
@DamirSecki
@DamirSecki Жыл бұрын
can you please, pretty please, extremely please... not pronounce OUR as or and more like hour? (just phonetically like a-uaer, and not o-ur ... I don't know whay is this so annoying to me... but drives me nuts :)
@NatoBoram
@NatoBoram Жыл бұрын
Aaaaand the prettify type was fake :/
@greendsnow
@greendsnow Жыл бұрын
sorry but this is not a high quality content...
@allone258
@allone258 Жыл бұрын
sorry but this is not a high quality comment
@juanps2721
@juanps2721 Жыл бұрын
That Prettify type makes the video high quality
@danieljanjanocha7178
@danieljanjanocha7178 Жыл бұрын
Like every developer finds a bug once in a while 😂
Infer is easier than you think
13:38
Matt Pocock
Рет қаралды 97 М.
Гениальное изобретение из обычного стаканчика!
00:31
Лютая физика | Олимпиадная физика
Рет қаралды 4,8 МЛН
REAL or FAKE? #beatbox #tiktok
01:03
BeatboxJCOP
Рет қаралды 18 МЛН
How Did I Not Know This TypeScript Trick Earlier??!
9:11
Josh tried coding
Рет қаралды 221 М.
I Cannot Believe TypeScript Recommends You Do This!
7:45
Web Dev Simplified
Рет қаралды 182 М.
You Must Know This Awesome Typescript Library - Typia Tutorial
13:29
Michael Breitung
Рет қаралды 2,2 М.
This TypeScript Trick Blew my Mind
6:17
Josh tried coding
Рет қаралды 38 М.
Type your functions in TypeScript and SAVE TIME
8:31
ThePrimeTime
Рет қаралды 56 М.
Generics: The most intimidating TypeScript feature
18:19
Matt Pocock
Рет қаралды 191 М.
Why use Type and not Interface in TypeScript
14:12
ByteGrad
Рет қаралды 223 М.
This CSS Property Replaces Hundreds of Lines of Code
6:36
Web Dev Simplified
Рет қаралды 99 М.
8 TypeScript Tips To Expand Your Mind (and improve your code)
10:54
What Large-Scale Software Looks Like
18:32
Josh tried coding
Рет қаралды 38 М.