What is TypeScript?
Why do we use TypeScript?
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.
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.
[noImplicitReturns](https://www.typescriptlang.org/tsconfig#noImplicitReturns) option will prevent you forgetting to return a value at the end of a function.
[noFallthroughCasesInSwitch](https://www.typescriptlang.org/tsconfig#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
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.
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.
anytypes — it's cheating. What you end up with if you have
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
Here are some more tips on how to avoid using
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.
Getting started with TypeScript
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.
.ts and from
.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 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