TypeScript was my first dip into the typed languages pool, and I remember feeling incredibly frustrated. More than I did even when learning completely different languages from scratch. Oddly enough, after talking with some more seasoned devs, I realized it's because it's a superset of JS. Usually when you learn a new language, you have to go back to crawling before you can run. But If you're a experienced JS dev, learning TS means you can still run; it's just that now there's a compiler next to you that keeps tripping you up.
Remember why you're doing it
TypeScript slows you down at first, that's a fact. But, you aren't using it to be faster, you are using it to be better. By its very definition, you have to take precious moments to add proper types to everything. That takes time. Keep reminding yourself that the slowdown at the beginning will be worth it once your codebase is practically self documenting and blocks silly mistakes automatically. Plus, this really is the future of the JS ecosystem. Many runtimes now support native TS with more on the way, and TS is soon going to be 10x faster (in terms of build time).
So take heart, the growing pains will be worth it! And in the meantime while you have those code-shin-splints, here are some tips that really helped me.
Don't turn off "strict" mode
That's right, I'm saying use the strict mode to make things even more difficult. That sounds extremely counter intuitive, but hear me out; there's a reason it's on by default for most configs (like vite). The faster you force yourself to do TypeScript the right way, the faster you will see its benefits and get less frustrated. TypeScript's main hurdle is incorporating the types, so the sooner that becomes muscle memory, the better. But, there is a minor exception:
Use the 'any' keyword for exploring
While you should generally avoid the any keyword, it does have a role to play. When you're in the “exploratory” phase of coding, it can be annoying to set the types. You may not know them yourself yet! This is a perfect opportunity to use any. Throw some in and figure out what your doing. Once you're satisfied that the function works as you intend, then put in the proper types. I recommend the any only stay in for a commit or two, and don't include them in code reviews (if you must, use unknown).
Default to types over interfaces
This one is annoying because it seems like every few years the experts change their mind. But you know what? It really doesn't matter which you choose, just pick one and stay consistent. It seems that these days I do align with the experts, who recommend types over interfaces. See, type was always the choice since VSCode will display the actual properties with the peak popup, vs interface which...tells you the name.
Here's what the type peak looks like:
type Person = {
name: string;
age: number;
hobbies: string[];
}
Compared to an interface:
interface Person
I know you can command click into anything to see more, but it's hard to beat the simple hover. Slightly related, Mathew Pocock has a neat prettify utility type you might want to look into. Check out prettify and some other helpful tips in this TS video (oddly enough, not by Matt Pocock).
Where to define types
My rule is this:
- Used once: Right next to the function or variable used (e.g. React props)
- Used 2-3 times: Still next to the main place it's used, but exported
- More than 3 times: Now you can break it out into a general types file
I've found that this keeps you from having to sift through large files of types where really everything is only used in a single place. TS will have you swapping files more often to check out nested types, and that can be annoying when you're in the flow. This "rule" tries to minimize that, while still keeping your code DRY and navigable.
Take breaks
When you're first starting out with TypeScript, you'll feel a little restrained. So go back to your other projects in standard JS and just code. These little breathers will allow you to stop worrying about types. But the crazy part is, after you use TS for a while, when you go back to JS you'll start to wish you were in TS. You might find you miss getting those helpful warnings and types, and of course, not getting undefined errors.
And once you find yourself missing TS, then you congratulations: you're hooked. It's kind of like the first time you realize you really enjoy eating well cooked vegetables as an adult compared to the steamed ones you had to choke down as a child. Or not, maybe you always liked vegetables. My convoluted point is, feeling the benefits of TypeScript is so much more visceral than just having someone explain it. You have to experience it.
Happy coding everyone,
Mike
Join the conversation on Reddit to leave a comment!