DEV Community

Cover image for 7 Secret TypeScript Tricks Pros Use 😎🀫

7 Secret TypeScript Tricks Pros Use 😎🀫

Tapajyoti Bose on May 14, 2023

TypeScript is an outstanding tool to make our lives easier & avoiding bugs, yet sometimes feels overwhelming to use. This article outlines 7...
Collapse
 
mistval profile image
Randall

Nice tips. In my opinion the main thing that separates pros from newbies is that pros turn on all the strict options and still manage to avoid as like the plague because they know a ton of tools like these to avoid it. Death to as!

Collapse
 
insidewhy profile image
insidewhy

It's now generally recommended to write index signatures using Record e.g. type ParticipantData = Record<string, ParticipantStatus>.

Collapse
 
bennycode profile image
Benny Code

Great tips! I'd like to contribute one more suggestion. Instead of using "any" for typing inputs in your type guard, it's safer to use "unknown". This approach encourages you to first check if a parameter is of type object before accessing its properties. You can see this here: youtube.com/watch?v=p-YEN-9KnRo

Collapse
 
bretbernhoft profile image
Bret Bernhoft

This is a nice summary of TypeScript tricks. Thank you for putting it together.

Using TypeScript has changed my approach to programming for the Web. And I'm grateful to have access to this technology.

Collapse
 
ghulamhussainsoftware profile image
GhulamHussainJoyo

I was looking for this type of article. Where I can learn all about props types. Thanks for sharing

Collapse
 
michthebrandofficial profile image
michTheBrandofficial

Hello. Do you mean React prop types? What prop types exactly?

Collapse
 
zflxw profile image
Maik

Thank you for these tips. Especially the Partial, Pick, Omit & Required Types help me, as I only knew Partial<>, but I have a usecase for the other ones too.

Collapse
 
brense profile image
Rense Bakker

Very good article and examples! :)

Collapse
 
yusufkolawole profile image
Yusuf Kolawole

Nice collections, thanks for listing all these...

Collapse
 
reacthunter0324 profile image
React Hunter

Great

Collapse
 
h_sifat profile image
Muhammad Sifat Hossain

Wow, I didn't know that I had been a TS Pro all this time!

Collapse
 
joeskills profile image
Code With Joseph

Thanks, this was very helpful.

Collapse
 
joeskills profile image
Code With Joseph

Thanks, this was very helpful.

Collapse
 
philipjohnbasile profile image
Philip John Basile

Really nice list!! Thank you!!

Collapse
 
wilmela profile image
Wilmela

Very helpful tips.

Collapse
 
tatdatda profile image
Dat

Nice

Collapse
 
colorfilter profile image
ColorFilter

Thank you for the great explanation. It helped me review the topic.

Collapse
 
insidewhy profile image
insidewhy • Edited

The as const thing is also not really correct. If you don't want to be able to mutate properties you should use readonly before each property. as const is used to produce compile-time constants, for example to allow you to map names to string literals at compile time.

Collapse
 
yiannistaos profile image
Yiannis Christodoulou

Great article and excellent tips.
Some of them are very useful.

I've created a repo to test out the above tips & tricks on my local machine. It is public if anyone wants to clone the repo and tests the tricks that Tapajyoti Bose shared with us.
github.com/Yiannistaos/learning-ty...

Collapse
 
stvndall profile image
stvndall

These are wonderful for design time. But you should make it clear that this opens you for lots of runtime problems, and am those check need to them be fine elsewhere. All of these types are removed when the code is 'compiled'.

So many bugs introduced into codebases because this loss of type information at runtime is not understood.

All those checks you mentioned still need to be done somewhere, but not everywhere.

Collapse
 
assertnotnull profile image
Patrice Gauthier • Edited

Enum is considered bad practice.
It's more flexible to use a const:

Image description

Collapse
 
sereneding profile image
Serene Ding

I think the second one is more about mapped value?

Collapse
 
fruntend profile image
fruntend

Π‘ongratulations πŸ₯³! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up πŸ‘