Benefits of Using TypeScript

What do you receive in return for writing extra type annotations? You receive a set of checks and editor features that all come from one source: the compiler now knows what type each value should have. Each benefit below follows from that knowledge, and the calculateTotal function from the previous lesson will show how.

Errors Appear Earlier

Static typing means that types are checked before the program runs, at compile time, rather than while it runs. A type mismatch such as calculateTotal("20", 5) therefore appears in your editor while you write the line. Without this check, you would find the mistake only when that line ran and someone noticed the wrong total.

Fewer type mismatches reach production, and this helps most as a project grows in complexity. Consistent types also help future developers to understand the system quickly, because the types record what each value is meant to be.

The Editor Knows Your Code

TypeScript integrates with popular code editors such as Visual Studio Code. Because the editor can read your types, it offers accurate autocompletion, type inference, and real-time error checking. Type inference means that the compiler works out a type from the code when you do not write one.

The same information helps you to move through a large codebase. You can look up the signature of a function, which is the list of its parameter types and its return type. You can also jump to a definition and follow how data flows through the application.

Signatures Help Teams Communicate

A typed signature tells every developer what a function expects and what it returns:

function calculateTotal(price: number, shipping: number): number {
  return price + shipping;
}

Nobody has to ask whether price is a number or a string, or read the function body to find out. Clear interfaces and object structures work the same way, so misunderstandings between team members become less common and collaboration becomes more efficient.

Refactoring Becomes Safer

Suppose the store now needs a discount, so you add a third parameter:

function calculateTotal(price: number, shipping: number, discount: number): number {
  return price + shipping - discount;
}

console.log(calculateTotal(20, 5));
console.log(calculateTotal(20, 5, 2));

The compiler reports each call that you did not update:

order.ts(5,13): error TS2554: Expected 3 arguments, but got 2.

In JavaScript, the first call would run with discount set to undefined and would print NaN. In TypeScript, you see which parts of the code the change affects, and you are less likely to introduce a bug during the refactoring.

Adopting TypeScript Gradually

TypeScript is a superset of JavaScript, so all JavaScript syntax is legal TypeScript. This does not mean that all JavaScript compiles without complaint, because the compiler still applies its type rules:

let count = 1;
count = "two";
console.log(count);

counter.ts(2,1): error TS2322: Type 'string' is not assignable to type 'number'.

The program still compiles to JavaScript, and it still prints two, exactly as it did before. TypeScript does not change how JavaScript code behaves at runtime. You can therefore rename files to .ts one at a time and fix the reported errors as you go, without rewriting the whole codebase. The compiler option allowJs lets .js and .ts files exist in the same project during this move.

Look at the inner box in the next picture. It holds plain JavaScript, and the outer box holds only what the compiler removes.