TypeScript is a superset of JavaScript, meaning it's actually JavaScript - but with enhanced functionality.
When you run an application built in TypeScript, the code is compiled into the same JavaScript you know and love before being run in your browser. For this reason, you can use TypeScript anywhere you’d normally use JavaScript – on the frontend and on the backend!
The only issue is that TypeScript - to someone who has never used a statically-typed language - is :
✨annoying af ✨
When you’re used to the carefree life of declaring variables without having to worry about their future, what they’ll eventually become, and the functions they’ll have to interact with, adding types to your code just seems like a bunch of extra work for little reward.
So, Why Not Just Use JavaScript?
The short answer is: TypeScript makes code less error prone, more maintainable and scalable, and more readable than JavaScript. It was designed especially for projects that meet the following criteria:
- Large or complex (enterprise-level applications)
- Maintained by multiple people
- Will evolve or be updated over time
…but I’ve found that even in small, simple projects I’ve maintained on my own, TypeScript has made me more productive as well!
Less Error Prone
The big difference between TypeScript and JavaScript is when type checking happens.
In dynamically-typed languages like JavaScript, type checking occurs during runtime. This means you’ll find out about your mistakes when you run your program. This may happen locally as you’re testing, during your unit tests or smoke tests, or even in production after you’ve shipped it to your customers.
By contrast, statically-typed languages like TypeScript check types during compile time - right in your text editor! This means that you’ll instantaneously see mistakes that could potentially break your code as you make them. Not only does this prevent you from shipping a buggy app, it also closes the gap between when you make the mistake and when you find out you’ve made a mistake, getting you to a fix, faster.
More Human Readable
TypeScript provides type annotations that act as documentation for your code. This allows other developers (…or even yourself, 2 weeks from now!) to more quickly understand (or remember!) what your code is meant to do. And if what you’re doing is confusing enough that the compiler can’t figure it out, it’ll be even more confusing for other developers (or your future self) to understand as well.
TypeScript’s rules lead to cleaner code that is much more readable. For example, as you use adopt TypeScript more across your front end apps, you’ll notice that you become more thoughtful about the abstractions you create. This is because since arguments need to be typed, there is more friction around creating abstractions. Whether you’re working in a shared codebase with other engineers or whether you’re working solo, this added level of readability is crucial for preventing new type errors.
More Maintainable and Scalable
TypeScript enforces stricter rules than JavaScript, which results in better code consistency across your codebase. As your organization scales, more developers are onboarded, and your codebase grows, it’s important that your code remain organized and consistent. And TypeScript enables you to do this.
Refactoring is also easier with TypeScript. This is because TypeScript’s type system can help you to ensure that your changes don't break any existing functionality. In addition, TypeScript enables functionality in text editors (like VS Code) that allows you to easily rename variables that are used across multiple components at once, in a much more reliable way than the old school “find and replace” method.
Once you’ve got a solid understanding of how to use TypeScript, you’ll also notice that the way you think about code will start to change. Because static typing forces you to think about types before you’ve even declared any values, you'll get great at mapping out the relationships between your components and their functions in your head before you even declare any variables! You'll be able to identify and account for new edge cases before deploying to production.
Overall, you can expect that your code will remain sturdy as you scale and will remain much easier to maintain.
Though the red squiggles seem ✨annoying✨ at first, the benefits of using TypeScript far outweigh the costs. Whether you’re contributing to a huge enterprise application or just getting started on the next coding project in your personal portfolio, TypeScript is a tool that you need in your front end tech stack. Now go add some static ⚡️ typing to your app!
