How I learned TypeScript

About me

I'm Tyler Church, a full stack web developer.

Why I wanted to learn TypeScript

I wanted to learn TypeScript because I was growing more and more afraid of our JavaScript codebase by the day. I couldn't refactor one thing without breaking other things in far off places. Our IDE's refactoring tools were helpful, but I had to constantly double and triple check the results to ensure nothing sketchy was happening.

Revisiting old code was like an absurd game of "guess the function signature" as many functions had been "helpfully" written to change behavior based on the type and number of arguments passed. Most data structures and data flows were undocumented to boot, so you had to read the source of every function to get even a general idea of how things worked.

How I approached learning TypeScript

My approach was pretty simple. First I played around with the demo on the website, and then I built some really small Node.js scripts on my personal downtime.

Nothing fancy, just more and more complex takes on "Hello, World!" until I began to understand the in and outs of TypeScript and how it worked.

After that, I would use it in small projects, and eventually I began to integrate it into parts of the backend of one of our apps at work. I quickly saw returns on my investment as the TypeScript sections of the backend quickly became the easiest to maintain and understand.

Challenges I faced

It took a while for me to get my head around the whole modules vs. namespaces thing. The short version is: Just treat every file like a module (Node.js style) and don't worry about namespaces. You almost never need them.

The different types of imports (require vs. amd, etc.) that TypeScript can emit via the "module" option also tripped me up, and still does every now and again. It can become especially nasty if you need to share code between the backend and front end. My recommendation is to pick either commonjs (Node.js's style) or ES2015 (the new standard) and use tools like Babel and Webpack (or others) to translate the imports to the style supported by the environment the code needs to run in.

Another challenge I faced was just the overhead of writing the types themselves. At first it felt like a bit of a slog, but now every type I write feels like insurance and documentation for my future self. Avoid "any" as best you can, and I think you'll quickly see the light.

One of the biggest challenges was getting adoption at work. There was resistence around pulling in a new tool and adding a compile step to our process. I'm not sure I would've gotten it if it hadn't been for Angular 2+ foisting it upon the Angular community. My boss wanted to upgrade from AngularJS to the new Angular 2, and the pure-JS route was only "supported" in theory. TypeScript was the only well-documented path.

Once we got started with Angular 2 though, the benefits of TypeScript became clear to the whole team and it quickly became the standard everywhere.

Key takeaways

The key takeaway for me is that TypeScript is totally worth it. The difference between the TypeScript codebases and the JavaScript codebases is like day and night. I can get my bearings, edit code, and refactor much more quickly and confidently than I could before. And it makes working together as part of a team so much easier.

Tips and advice

To any others looking to start out with TypeScript, my recommendation is to pull it in for a small personal project first. Get a feel for it. And then once you're confident, use TypeScript in 1 isolated place of an existing application. I think you'll quickly feel the benefits, and soon you'll be itching to convert the whole project

Final thoughts and next steps

Overall, I think this has been a great journey, and I'd love to be able to teach more people about TypeScript and get more people to be able to use it. I think the JavaScript community will be a much better place with more TypeScript code in it.