Course outline · 0% complete

0/26 lessons0%

Course overview →

What TypeScript Is

lesson 1-1 · ~9 min · 1/26

JavaScript with a safety net

You already write JavaScript, so you already know its biggest weakness: it happily runs broken code. This JS function looks fine and crashes at runtime:

function greet(user) {
  return "Hello, " + user.name.toUpperCase();
}

greet("Alice"); // crash: user.name is undefined

JavaScript only discovers the problem while the program is running, maybe in front of a user.

TypeScript is JavaScript plus a type system: a way to declare what kind of value each variable and parameter holds. A type is a category of values, like string or number. Before your code runs, the TypeScript compiler (a program called tsc) reads your annotations and checks every line. If you pass a string where an object is required, it refuses to compile and points at the exact line.

Types disappear at runtime

TypeScript is a compile-time layer. The compiler checks your code, then strips out every annotation and emits plain JavaScript. The browser or Node never sees a type. That means:

  • Valid TypeScript behaves exactly like the JavaScript you know
  • Types cost nothing at runtime, they are checks and documentation
  • Any JavaScript file is already almost valid TypeScript

The workflow is: write .ts files, the compiler checks them, and out comes .js that runs anywhere JavaScript runs. Every TypeScript sample in this course is shown with the output that pipeline produces.

app.tsyour code + typestscchecks every lineapp.jsplain JS, runserrors are reported here, before anything runs
The TypeScript pipeline: your .ts file passes through the compiler, which checks types and emits plain JavaScript.

Your first TypeScript program

Every variable below declares its type after a colon. Nothing else about the code differs from JavaScript.

const language: string = "TypeScript";
const firstRelease: number = 2012;
const isTyped: boolean = true;

console.log(language + " appeared in " + firstRelease);
console.log("Statically typed: " + isTyped);

Output

TypeScript appeared in 2012
Statically typed: true

The colon syntax name: type is the only new thing here. Everything else is the JavaScript you already know.

Change firstRelease to the string "2012" and the program stops compiling, because the annotation says number and a quoted value is a string. That refusal is the whole feature: the mismatch is reported on the spot rather than surviving into a running program where it might quietly produce "20122" from an addition.

When errors surface

TypeScript reports a type error, such as passing a string to a function that expects a number, before the program runs. The compiler checks the whole program and refuses to emit output while any type error remains.

That timing is the entire point. Compare the two failure modes:

Plain JavaScriptTypeScript
When the mistake is foundWhile running, on the line that breaksWhile compiling, before running
Who finds itWhoever hits that code path, possibly a userYou, immediately
What you getA stack trace from a live sessionA file, a line, and an explanation

Bugs surface on your screen at compile time instead of in front of users at runtime.