Our software development team has been using JavaScript frameworks for years to build digital products, whether for our clients or ourselves. One of the best ways for us to up our JavaScript productivity is by leveraging languages like TypeScript to help ensure that our code is quality.
As a quick overview, TypeScript is an open-source programming language created by Microsoft that builds off of JavaScript and allows you to add static type definitions to your code. In doing so, you create a system to display errors in development, which can drastically reduce the time spent finding these later in the process. TypeScript has been widely adopted by the JavaScript community over the last several years.
Earlier this month, a few of us sat down and discussed TypeScript live on our YouTube channel. TypeScript offers a lot of benefits, but we’ll break down the following in more detail:
- Reduce cognitive overhead
- Increase code quality
- Provide a single source of truth
- Free up part of your mind to solve logic or UI problems
Reduce cognitive overhead
There is, as with anything, a learning curve when implementing TypeScript. However, once you’ve built up your skills, adding the extra static type annotations won’t feel like extra effort.
One of the biggest benefits of TypeScript is that it can offload a huge amount of effort when you’re trying to write code since it will alert you when you’re not matching the specified type. This means you essentially let the compiler tell you when you’ve made a mistake. You can immediately make the necessary adjustment right then and there, instead of waiting until your code runs.
As you move throughout the codebase, you can rely on TypeScript to show you the effects changing code might have, even alerting you of errors in distant or seemingly unrelated parts of the codebase. The more complicated the project, the more this matters. As long as you accurately represent your data, you’ll be able to reduce the amount of cognitive overhead needed to produce quality code.
Increase code quality
Quality code is what we’re all aiming for, and TypeScript helps to increase the quality of any codebase it’s hooked up to. It does this by giving you a system to catch and display errors. Perhaps more importantly, it provides fixes before you run code.
As many know, sometimes mistakes don’t get caught until after the code is deployed and a user finds a bug. TypeScript helps decrease the chances of that happening. On top of just catching errors in the code, it can actually push you to write the code in a more maintainable and readable way, as you have to account for edge cases you may not have thought of.
TypeScript also allows you to write with modern JavaScript syntax since it can transpile to different versions of JavaScript.
Provide a single source of truth
TypeScript gives you better documentation, plain and simple. The static type annotations themselves are what act as the documentation. As you continue to build out the codebase, the annotations are enforced by the compiler and kept up-to-date. This documentation will help guide the code throughout the project to ensure data is represented accurately and types are defined and assigned.
Also, if personnel changes on the project, which often happens, this single source of truth will get someone up to speed faster. This can dramatically reduce the knowledge transfer period.
Free up part of your mind to solve logic or UI problems
With all of these benefits combined, TypeScript ultimately gives you more creative space to focus on the bigger challenges. For us, it allows our team to focus on the bespoke problem that we’re trying to solve for our client. Whether that be a UI issue or a logic problem, TypeScript offloads a huge amount of effort and work to the computer. You can then spend your precious brainpower trying to unpack and solve more complex situations in the codebase, ultimately driving more value for the product.
You’ll have more capacity to think about the domain and the problems you’re trying to solve. Let TypeScript shift where you focus your energy.
As a team that’s focused on constant improvement, we continue to explore tools like TypeScript and leverage it to meet the needs of our projects. We just finished up a book study on Dan Vanderkam’s book, Effective TypeScript: 62 Specific Ways to Improve your TypeScript. Check it out for a deep dive into some best practices and use cases. If you’re just getting started in the TypeScript game – or want to up the ante – we recommend digging into the following:
- Watch tutorials on egghead.io and Udemy
- Leverage TypeScript’s handbook
- Play around in the TypeScript playground for more hands-on use
- Try it out on a smaller, personal project with isolated examples
- Pair program with someone who has more TypeScript experience
Stay tuned on our YouTube Channel for more live dev chats where we’ll cover other languages, frameworks, tips, tricks, and learnings in the world of software development.
