What Is TypeScript?

Introduction

JavaScript lets you do almost anything, including mistakes that only show up when a user hits them. TypeScript is JavaScript with an extra layer: types. A type says what kind of value something is, and TypeScript checks your code against those types before it runs, like a spell checker for your programs.

This course assumes you know basic JavaScript. If not, start with JavaScript Basics.

The simple explanation

TypeScript = JavaScript + types that are checked while you write.

Every valid JavaScript program is also valid TypeScript. TypeScript then adds ways to describe your data, and warns you when you use data in a way that does not fit.

Run this example. JavaScript is happy with it. TypeScript is not, and the Type check panel under the editor explains why:

The line double("21") passes text where a number is expected. In plain JavaScript this "works" by accident, because "21" * 2 becomes 42. In a larger program that kind of accident turns into bugs that are hard to trace. TypeScript points to the problem on the exact line.

How it fits together

Browsers and Node run JavaScript, not TypeScript. So TypeScript code is compiled: the compiler checks the types, then removes them, leaving plain JavaScript.

1. You write .ts files with types.
2. The compiler checks them and reports errors.
3. It outputs .js files with the types erased.

That is what happens in the editors on this page. When you press Run, your TypeScript is checked, converted to JavaScript, and run. Types exist only while you write. They cost nothing at runtime.

Annotations: telling TypeScript the type

A type annotation is a colon and a type after a name:

Now try to break it. Change 30 to "thirty" and run again. You will see an error that a string cannot be assigned to a number.

Inference: you often don't need annotations

TypeScript can work out types from the values you give. This is called type inference.

A good rule: let TypeScript infer when the value makes the type obvious, and write annotations where it cannot know, such as function parameters.

Reading an error message

Error messages look scary at first, but they follow a pattern. Read this one slowly:

The message says that type string is not assignable to type number. In other words: "you promised a number here, but gave me text". The fix is to make the value match the promise, or to change the promise if it was wrong.

Try it yourself

This function should add two numbers, but a call passes the wrong thing. Read the type error, then fix the call so that it prints 15.

Summary

• TypeScript is JavaScript plus types, checked before your code runs.
• It compiles to plain JavaScript, and the types are erased.
• An annotation is name: type. Inference lets TypeScript work out obvious types.
• Error messages say what type was expected and what you gave.