TypeScript Basics: Adding Type Safety to Your JavaScript

Over the past few years TypeScript has become one of the most in-demand languages in web development, and this rise was anything but accidental. At its core TypeScript is not an entirely new language but rather a layer built on top of JavaScript that adds a type system to it. Everything you write ultimately remains plain JavaScript, yet thanks to its compiler you gain the ability to catch a wide range of mistakes before the code ever runs. Developed by Microsoft, the language has steadily become the standard tool across the majority of React, Angular, Vue and Node.js projects.

Why TypeScript matters

Because JavaScript is a dynamically typed language, there is no way to know in advance what kind of value a variable will hold. This is convenient for small scripts, but it turns into a real problem as a project grows. For instance, if you accidentally pass a string into a function instead of a number, JavaScript will only report the error at runtime, often only when a user opens the page. TypeScript, by contrast, highlights that same error with a red underline right in your editor while you are still writing the code.

In addition, type information enables your editor to provide intelligent autocompletion. The editor itself knows which fields an object has and which arguments a function expects, and it suggests them as you type. When working in a large team this becomes even more valuable, because types effectively turn the code into living documentation, and other developers immediately understand how to use your functions. For exactly these reasons, TypeScript has become practically mandatory on large projects.

Type annotations and core concepts

Getting started with TypeScript is remarkably easy, since any valid JavaScript code already counts as valid TypeScript. The very first step is adding type annotations to your variables and functions. In the example below we explicitly state that the function accepts two numbers and returns a number, so if a wrong type is passed the compiler warns you immediately rather than later.

function sum(a: number, b: number): number {
  return a + b;
}

let name: string = "Aziz";
let age: number = 25;
let active: boolean = true;

sum(5, 10);      // valid
sum(5, "10");    // error: string is not number

For more complex structures you use interface and type. An interface describes the shape of an object, meaning which fields it has and what types they are. The type keyword serves a similar purpose, but it also works well for union types and other complex combinations, which makes it a more flexible building block.

interface User {
  id: number;
  name: string;
  email?: string; // optional field
}

type Status = "active" | "blocked" | "pending";

function greet(u: User): string {
  return "Hello, " + u.name;
}

Union types and generics

Union types mean that a single variable can hold values of several different types. The Status type above is a good example, since the variable can only take one of three specific values, and writing any other string produces an error. Generics, meanwhile, are the most powerful tool for reusing code, as they let you pass a type into a function as a parameter.

function first<T>(items: T[]): T {
  return items[0];
}

const num = first<number>([1, 2, 3]); // number
const word = first<string>(["a", "b"]); // string

Here T represents any type, and the function adapts to whichever type it is called with. In this way a single function works safely with numbers, with strings and with objects alike, while preserving the type information each time instead of losing it on the way out.

Migrating a JavaScript project to TypeScript

You do not have to rewrite an existing JavaScript project all at once. Most teams choose a gradual approach: they first create a tsconfig.json file and then convert files to the .ts extension one at a time. The compilation step is handled by the tsc command, which transforms TypeScript code into ordinary JavaScript that browsers and Node.js understand.

# install TypeScript
npm install -D typescript

# create a configuration
npx tsc --init

# compile the code
npx tsc

During this process it is recommended to enable strict mode, because it activates the most rigorous checks and prevents a great many future problems. At first it may produce a few more warnings than you expect, but over the long run it noticeably improves the quality of your code and the reliability of the entire application.

Strengths and when you may not need it

TypeScript makes code more reliable, catches errors early and simplifies collaboration in large teams. At the same time it has a learning curve and introduces an extra configuration and compilation step into the project. If you are writing a very small one-off script or rapidly prototyping an idea, plain JavaScript may be entirely sufficient. However, for any serious product that will grow, be maintained for months or years and be worked on by several developers, TypeScript becomes a choice that fully justifies the effort invested. This is precisely why so many companies now prefer to start new projects directly in TypeScript rather than postponing the switch.