<aside> 💡 Original Post by Martin Hochel: https://medium.com/@martin_hotell/10-typescript-pro-tips-patterns-with-or-without-react-5799488d6680

</aside>

🎒 this article uses following library versions:

{ "@types/react": "16.4.16", "@types/react-dom": "16.0.9", "typescript": "3.1.3", "react": "16.5.2", "react-dom": "16.5.2"}🎮 source code can be found on my github profile

TypeScript is definitely the best thing that happened to JavaScript. period.

Unfortunately, I cannot say the same about “The best thing that happened to Java/C# devs writing JavaScript with it 👀😳🌀⏱”

Why 🤨?

Well, it definitely makes your Java/C# alter ego feel like home, having types within JavaScript (which is amazing !), but then, it introduces other “language features” which are not part of standard JavaScript, and because of those, it may throw a false prejudice about TypeScript, by putting it to a “Completely new language” bag, which isn’t really true IMHO.

I’ve been always trying to stay away from various TS features (for a good reasons 👉explained in this article) to stay in Idiomatic/Standard JavaScript land as much as possible.

This article describes various patterns/tips that I “invented/learned” and have been using while using TypeScript and React for building UI’s.

NOTE:Initially, this blog post introduced “only” 10 tips, During review of this post I already added 8 more 💪. I may add additional ones in the future as React patterns/TS capabilities change/improve/evolve. Make sure to check this post time to time for any updates 😎

UPDATE:

26.1.2019 updated tip#9 👉Use type inference for defining Component State or DefaultProps23.1.2019 added tip#19 👉 Use type alias instead of interface for declaring Props/State#20 👉 Don’t use FunctionComponent<P> to define function component

Whole article is written like an “style guide” with 3 sub-sections for every tip/pattern which consists of:

• Don’t 🚨 ( code example what you shouldn’t be doing)
• Do ✅ or Good/Better/Consider (code example what you should be doing)
• Why 🧐 (reasoning/explanation)

With that covered, let’s hop into 10++ TypeScript Pro tips/patterns with ( or without ) React.

1. Don’t use public accessor within classes

Don’t: