DEV Community

Cover image for 11 Tips That Make You a Better Typescript Programmer

11 Tips That Make You a Better Typescript Programmer

ymc9 on December 23, 2022

Learning Typescript is often a rediscovery journey. Your initial impression can be pretty deceptive: isn't it just a way of annotating Javascript, ...
Collapse
 
balazssoltesz profile image
Balazs Soltesz • Edited

Types have a higher performance impact compared to interfaces so in larger codebases prioritizing interfaces over types should be considered.

Collapse
 
ymc9 profile image
ymc9

Good point. I've never measured the compiler's performance for using interface vs. type. I see people saying interface inheritance is easier to type-check than type interception, which sounds reasonable.

I think if there's quite a lot of inheritance in the code base, it makes good sense to prefer interfaces that look more object-oriented.

I'll do some more research and maybe update the post later. Thank you!

Collapse
 
joshuakb2 profile image
Joshua Baker

Are you sure that's true? I recently heard that that's actually a myth.

Collapse
 
joshkel profile image
Josh Kelley

If I understand github.com/microsoft/TypeScript/wi... correctly, types aren't universally slower, but once you start doing more complex type unions and intersections, it can be faster to use interfaces.

Thread Thread
 
ymc9 profile image
ymc9

That's my understanding too.

I believe it's mainly due to this statement: "A final noteworthy difference is that when checking against a target intersection type, every constituent is checked before checking against the "effective"/"flattened" type." Though it feels like a limitation of the current tsc implementation, I don't see why checking of type intersection has to be done repeatedly instead of cached.

Would love to see some benchmarks.

Collapse
 
mariamarsh profile image
Maria 🍦 Marshmallow

Incredible article 👏
It will be very cool if you write something similar for other languages.

Collapse
 
ymc9 profile image
ymc9

Thank you @mariamarsh ! I'll see what to learn for the new year :D.

Collapse
 
mikec711g profile image
Michael Casile

I'm not all the way thru, but this a 5 star article. Most important thing I've learned from it so far is that I don't know TS well enough. Thanks for the great info ... that revelation will have me following you and looking for more great articles.

Collapse
 
ymc9 profile image
ymc9

Thank you for the recognition, @mikec711g . It's a great pleasure!

TS is fantastic. I've been using languages created by Anders Hejlsberg in my career, and they're just consistently awesome! True genius.

I'll strive to create content that matters.

Collapse
 
tylim88 profile image
Acid Coder

this is a great post, author has very good understanding on TS

Collapse
 
rafo profile image
Rafael Osipov

dev.to needs more articles like that.

Thank you.

Collapse
 
qq449245884 profile image
qq449245884

Dear ZenStack,may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Collapse
 
ymc9 profile image
ymc9

Hey @qq449245884 , I'm glad you find it helpful. Please feel free to translate and share. Thanks!

Collapse
 
bobbyconnolly profile image
Bobby Connolly

I really appreciate the time you took to make this article. Thank you!

Collapse
 
isalahyt profile image
iSalah-YT

Thank you so much 🥰🥰💕🥰🥰

Collapse
 
guillaumelagrange profile image
Guillaume Lagrange

Thanks for the article.

Very small typo in #9:
NamedCircle's name property should not be optional.

Collapse
 
ymc9 profile image
ymc9 • Edited

Thanks, @guillaumelagrange . The "name" field is intentionally optional to demonstrate the effect of the satisfies keyword. The NamedCircle type gives a "looser" contract than inferred by the variable declaration.

Does it make sense, or maybe I missed something?

Collapse
 
alessioferrine profile image
alessioferrine

It's great tips, thanks

Collapse
 
annabaker profile image
Anna Baker

Great article! I found the tips really helpful in improving my Typescript skills :)
it's always nice to find resources that are easy to understand and practical to use.
Thank you for sharing!

Collapse
 
tcharl profile image
Charlie Mordant

Many thanks, improved my typescript skill in few lines :-)

Collapse
 
ymc9 profile image
ymc9

Glad to help 😄. Thank you for your interest!

Collapse
 
dopamine0 profile image
Roee Fl

This is an amazing article, I was skeptical about picking up on anything I didn't know yet and pleasantly surprised with a few major points. Thank you for taking the time to write this.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
moinulmoin profile image
Moinul Moin

very helpful, thanks mate. also exploring ZenStack.

Collapse
 
joshuakb2 profile image
Joshua Baker

This is obviously a nitpick, but "number" actually represents a finite set of values.

Collapse
 
ymc9 profile image
ymc9

You're right ... integers are bounded, and floats have finite precisions. I'll make an update.

Collapse
 
diwakardayal profile image
Diwakar dayal

Great, I will bookmark for later

Collapse
 
ostgals profile image
Andrejs Kuzmins • Edited

Very good article, but:

The & operator creates an Intersection: Measure & Style denotes a Set of objects containing both radius and color fields

Not an "intersection" actually but "union".

Collapse
 
ymc9 profile image
ymc9

Thanks for the comment @ostgals . The reason why it's an intersection is because the resulting type requires both a "radius" and a "color" field, so it's a smaller set than type Measure and type Style. Does this make sense?

Collapse
 
niscolinx profile image
Igboanugwo Collins

Very helpful, thanks!

Collapse
 
msnisha profile image
Nish

I learned many new things here. The author's knowledge on typescript looks very good. I used to struggle with optional fields now I know "satisfies" will help in some of those situation.

Collapse
 
ymc9 profile image
ymc9

Thanks for the compliment @msnisha . Typescript is an extraordinary language, and there's some special fun in learning it 😄.

Some comments have been hidden by the post's author - find out more