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.
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 JavaScript | TypeScript | |
|---|---|---|
| When the mistake is found | While running, on the line that breaks | While compiling, before running |
| Who finds it | Whoever hits that code path, possibly a user | You, immediately |
| What you get | A stack trace from a live session | A file, a line, and an explanation |
Bugs surface on your screen at compile time instead of in front of users at runtime.