Why use TypeScript?

"Move fast and break things" have been the predominant tagline for startups for years. We need to start moving fast with the confidence that we are not breaking things.

typescript, javascript, programming languages


code snippets showing a typed function rendering a string of emojies

This is probably not the first article you are reading about why you should use TypeScript, and I am sure it won't be the last. Hopefully, after reading this, you will have a better idea of what TypeScript can do for you, and why you should try to use it.

This will be non-technical post on why I think TypeScript has risen to the level that it has and why I choose to adopt TypeScript for all of my JavaScript projects.

What is JavaScript?

Before we can describe TypeScript, we need to talk a little about JavaScript.

To create a website — and many other things — you generally work in three languages: HTML, CSS, and JavaScript (JS). Broadly speaking, HTML defines the layout and content that will appear on the page, CSS defines the visual style of the page, and JS handles the interactive elements.

JavaScript is often also used for creating "back-end" services that communicate with a web browser or to another service by sending raw data.

JavaScript is a dynamically typed language which means the type of a variable declaration is dependent on the value assigned to it.

// This is OK
let name = 'Michael'; // the type of name would be string
// This is also OK
let name = 1; // The type of name would be number
let name = null; // The type of name would be object
let name = false; // The type of name would be undefined

Comparably, C is a statically typed language meaning you have to specify what type of data the variable is going to hold. These variables can be cast into other types, but they don't get converted; you just read them assuming they are another type.

// This is OK
char name = 'Michael'; // The type of name would be char (string)
// This is NOT OK
char name = 1; // The type of name would still be char (string)
char name = NULL; // The type of name would still be char (string)
char name = FALSE; // The type of name would still be char (string)

Both the first name variables contain a string, but the difference is that in C the variable can only ever contain a string because that is what we declared when we created the variable. In JavaScript the variable can change to be anything, like a number, or a list of strings.

From C, this way of statically typing your variables becomes especially powerful when you are trying to, for example, perform a string operation on the variable later on in your code.

What is TypeScript?

TypeScript is a language made by Microsoft which builds on JavaScript. It contains all of JavaScript, and a bit more. TypeScript is a transpiler, meaning it turns code from one language into another. The tagline for TypeScript is "JavaScript that scales" which is a statement that these extra type annotations allow you to work more confidently on bigger projects.

Traditionally type systems, like the one in C, were important because they would enable code generators to understand what code to generate. This is not the purpose of TypeScript. It is a type system more for tooling and productivity sake than for code-generation sake. By allowing you to statically type your variables, it helps with productivity.

Taking the above JavaScript example, we can provide static types to the variables in TypeScript like so:

// JavaScript
let name = 'Michael';

// TypeScript
let name = 'Michael';

Yes, you are not missing something, there is no difference between the two above declarations. Due to TypeScript's aim to only extend JavaScript, your normal JavaScript code should work fine with TypeScript. The things TypeScript adds to JavaScript are intended to help you be more explicit about what kinds of data are used in your code.

- let name = 'Michael';
+ let name: string = 'Michael';

This extra : string allows the reader to be certain that name will only be a string. Annotating your variables also gives TypeScript a chance to verify this for you. This is very useful because doing flow analysis, eg. keeping track of changes like the type of a value in a variable seems easy when it's one or two, but once it starts hitting the hundreds, that is a lot to keep track of.

Types help programmers be more confident about their code because types catch mistakes. This is because you can verify up-front how correct your code is. This means you have less need to understand how every change affects the rest of the code.

Why am I using TypeScript?

"Move fast and break things" have been the predominant tagline for startups for years. While you are a young startup with no clients or users, this can be very valuable trying to get to market in good time. Once you start to have people using your product though, breaking things should be out of the question.

As a software engineer working with startups, it is incredibly important that we keep moving fast. However, I think it is important that we move fast with the confidence that we are not breaking things. This is what TypeScript is for me.

Like everything else, TypeScript has some tradeoffs. When working in a TypeScript codebase, you will often see that it adds a bit of noise. TypeScript is generally pretty good at inferring types which help keep the noise at bay but in very large codebases it does become apparent.

TypeScript also adds to the development time since you have to statically type the individual functions and data structures. It often forces you to think about your component API and the data structure early in the process which can make it slower to iterate on.

These tradeoffs, however, tend to end up working in your favour. While it adds some noise to the code and might not be needed for smaller projects when you are working with hundreds of files of code, making a change in one file can affect the behaviour in several other files — like throwing a pebble in a pond it will send ripples to the bank. Adding types drastically reduces the complexity of making improvements to your programs.

TypeScript ultimately helps me feel good about the changes made are only the changes that I want. TypeScript is not the only programming language trying to make JavaScript code safer, but it has the biggest community and support for tooling. It also builds on top of JavaScript so you can transfer all that knowledge and simply add types a little at a time.

All of these qualities make it worth adding an extra tool to our belts, and TypeScript is growing to be one of the most popular programming languages in the world with just over 7 million weekly downloads.