TypeScript is a programming language built to give JavaScript strong types. Developed and maintained by Microsoft, it was first released in 2012. Its goal is to add strong, static type checking to JavaScript. This allows developers to catch mistakes much earlier which in turn makes building robust software much more efficient. TypeScript gained significant mindshare around 2019 and was subsequently voted the 2nd most loved programming language in the Stack Overflow 2020 Developer survey. It captured developer's hearts and minds quickly, and for good reason. Let's take a look at why!
What is TypeScript?
TypeScript is a strongly typed programming language that builds on JavaScript, which aims to provide better tooling for any size project. All existing JavaScript programs are valid TypeScript programs, as it's a strict superset of JavaScript. It allows you to catch errors earlier as you're writing your code, since it has strong integration for IDEs. The integration in VS Code is particularly good. TypeScript is converted to JavaScript by the compiler, so it will run anywhere JavaScript runs.
Why do we use TypeScript vs JavaScript?
If you've never used TypeScript before, it might seem more complex at first but you'll quickly find that it simplifies reading and understanding your code. It provides tools in your editor, like static type checking, to improve the speed and efficiency of the development process. This will catch errors as you make them rather than customers discovering them much later in production. The sooner you can catch bugs, the easier they are to fix.
With a good set of types, you can focus on more effective tests of behaviour rather than checking types. If you don't have any tests then shame on you, but you'll get some for free.
TypeScript is just like JavaScript but when you're jumping out of a plane it's best to wear a parachute
Another important benefit of types in TypeScript is the documentation of your code as you write it. The better the type definitions, the clearer your intent. If you define good types, developers following you will be able to reason about your code more easily. It's not just ordinary documentation, it is executable by the compiler to detect errors as they arise.
In editors like VS Code, you'll find extra tooling such as auto-completion, inline type and error assistance and help with catching certain bugs. Even when you're still in a JavaScript file the TypeScript compiler can help. For example, the noImplicitReturns option will prevent you forgetting to return a value at the end of a function. noFallthroughCasesInSwitch will stop you forgetting break statements between case options in a switch block. TypeScript will also optionally warn you about unreachable code and labels with the allowUnreachableCode and allowUnusedLabels options.
The TypeScript team has really made TypeScript as easy as possible to migrate to and use effectively. Not only that, but the maturity and speed at which new TS releases come out is quite remarkable. Outside of the core team, the TypeScript community has done an incredible job of providing high quality types for npm packages which aren't written in TypeScript or don't provide their own type information.
Once you get used to the power of a well-typed TypeScript codebase, you'll find it very difficult to go back!
What are the challenges of migrating to TypeScript?
Acclimatising to the new syntax, the tooling and the compiler advice takes a while even for experienced programmers. Reading the error messages can be difficult at first, in our experience it takes a week or two to feel comfortable with the all of the help the compiler and tooling is giving us. It is a good idea to introduce it slowly when you first start, but you'll find it quickly becomes very familiar even for less experienced developers.
Introducing it to a small section of the codebase is going to help your team feel comfortable before fully committing to a full migration. Although the changes themselves are initially straightforward, changing a large codebase can certainly present a challenge. Luckily TypeScript has lots of options to help out.
It's natural when starting with TypeScript to reach for any types which will instantly solve any type errors you might be facing (temporarily at least). any types, like it says on the tin, allow any type to be used in that location by effectively turning off type checking completely.
Using any to suppress type checking is absolutely not what you want because then TypeScript can no longer help you! Resist the temptation to leave it like this as you'll end up with unhelpful types that will prevent TypeScript from helping you catch errors.
Avoid using
anytypes — it's cheating. What you end up with if you haveanyeverywhere in your codebase is JavaScript, but with the unnecessary baggage of a compiler tool chain.
Choose the narrowest (or most specific) type you can for the situation rather than the widest or least specific (eg any). Sometimes you don't actually know what type something should be so consider using the more explicit unknown type.
Here are some more tips on how to avoid using any types:
Be highly suspicious of any TypeScript codebase that uses more than a handful of any types. You may as well not bother using TypeScript at all, because it can't help you. To make the most of the type checker you need to fully commit. Trust us it's worth it.
Once you've been writing TypeScript for a while, and discovered how many bugs it's caught, you'll find it very hard to go back to developing in plain old JavaScript. Be warned, type checking is very addictive.
Getting started with TypeScript
Remember that all existing JavaScript programs are valid TypeScript programs, which makes converting JavaScript to TypeScript very straightforward. The TypeScript handbook has a guide to Migrating from JavaScript as well as a guide to migrating React projects.
For new projects, all of the usual project creation tools for JavaScript will have an option to set up with TypeScript. For a Create React App in TypeScript you can simply run:
npx create-react-app my-app --template typescript
Similarly for a new NextJS app we can use TypeScript like so:
npx create-next-app@latest --ts
Most popular frameworks these days will have TypeScript support and should provide a quick and easy way to switch over.
TypeScript migration strategies
When deciding to migrate a project to TypeScript, there are a few key strategies you can implement to make it as smooth as possible.
Start small and get your team on board. It is best to start by renaming a few files at a time. To convert a JavaScript file to TypeScript, it is as simple as renaming files from .js to .ts and from .jsx to .tsx. Once you begin getting used to the syntax and tooling, you can gradually convert more of the codebase or use scripts to pull the bandage off.
Remember to avoid using any types, and commit to using the most specific types possible to get the most help out of the compiler in the long run.
Don't panic if the errors are overwhelming when you first start, you will get used to them quickly and they will become much easier to work through the more you do. Remember that these errors are there to help you catch bugs early, and the time spent adding strong typing early on will pay off long term.
This guide to common TypeScript errors and how to deal with them might be useful.
TypeScript vs JavaScript: who's the winner?
If you hadn't guessed already, the winner is clear: TypeScript helps developers build better software with less bugs. Everyone we know that has developed with TypeScript couldn't even imagine going back to the bad old days of programming in JavaScript. The migration path is as smooth as it can possibly be, and the benefits are clear. So there is really no excuse not to dive right in.
References
TypeScript Documentation The official TypeScript documentation
The TypeScript Handbook The official TypeScript handbook
TypeScript Deep Dive A well written and thorough community-driven open source TypeScript tutorial
