Introduction to TypeScript: What It Is and Why Developers Use It

TypeScript is JavaScript with types. You write JavaScript as usual, and add notes that say what kind of value each variable, parameter and return value should hold. A tool called the TypeScript compiler checks those notes before your code runs and reports mistakes, then produces plain JavaScript that runs anywhere JavaScript does.

TypeScript is developed by Microsoft as open source and is used in a large share of modern web projects, including many React, Angular, Vue and Node.js codebases.

A bug JavaScript misses#

function totalPrice(price, quantity) {
  return price * quantity;
}

const quantityFromForm = "3";                 // form values are strings
console.log(totalPrice(250, quantityFromForm)); // 750, by luck
console.log(totalPrice(250, undefined));        // NaN, at runtime

JavaScript happily runs this; you only find the problem when someone sees NaN on a page. In TypeScript, you state what the function expects:

function totalPrice(price: number, quantity: number): number {
  return price * quantity;
}

console.log(totalPrice(250, 3));

750

and passing the wrong type is an error before the program runs:

function totalPrice(price: number, quantity: number): number {
  return price * quantity;
}

totalPrice(250, "3");

error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Your editor underlines the mistake as you type.

How it works#

1. You write .ts files: JavaScript plus type annotations such as : number.
2. The TypeScript compiler (tsc) type-checks the code and reports errors.
3. It then removes the types and outputs ordinary .js files.
4. Browsers and Node.js run the JavaScript. The types do not exist at runtime.

Because the output is plain JavaScript, TypeScript works with every browser, every JavaScript library and Node.js.

Why developers use it#

The cost is some extra syntax and a build step, and a learning curve for the advanced features. Most teams find the trade-off worthwhile for anything beyond small scripts.

What you should know first#

TypeScript is a superset of JavaScript: all JavaScript concepts (variables, functions, objects, arrays, promises, classes, modules) still apply, and most of TypeScript is about describing them. Learn JavaScript first; the JavaScript course covers everything this course assumes.

Where TypeScript is used#

• Front-end frameworks: Angular is written in TypeScript; React, Vue and Svelte projects commonly use it.
• Back ends: Node.js servers, often with frameworks such as NestJS, Express or Fastify.
• Full-stack frameworks such as Next.js, which create TypeScript projects by default.
• Libraries and tools: many popular npm packages ship TypeScript type definitions. (This website is written in TypeScript too.)

Job descriptions for front-end, full-stack and Node.js developer roles frequently list TypeScript; see the Web Developer path.

What you will learn#

1. Setting up TypeScript and the basic types.
2. Type aliases, interfaces, unions, literal types and narrowing.
3. Typing functions and classes.
4. Generics for reusable, type-safe code.
5. Advanced types: keyof, utility types, mapped and conditional types.
6. Real projects: modules, declaration files, tsconfig.json, the DOM and API data.

Key takeaway#