What is TypeScript?
You already write JavaScript. TypeScript is JavaScript plus a static type system. You write .ts files, the TypeScript compiler (tsc) checks your types, then emits plain .js that runs anywhere JavaScript runs.
In JavaScript, every value has behaviors you discover at runtime. Consider a variable named message:
message.toLowerCase();
message();
If message is "Hello World!", the first line works. The second throws:
TypeError: message is not a function
JavaScript only knows the type of a value when the code runs. TypeScript's job is to predict those problems before you run the program.
Static type-checking
A static type-checker describes the shapes and behaviors of values ahead of time. TypeScript uses that information and flags mistakes early:
const message = "hello!";
message();
// Error: This expression is not callable.
// Type 'String' has no call signatures.
You get the error in the editor or from tsc : without executing the code.
Bugs that do not throw
Not every bug throws a TypeError. Accessing a missing property returns undefined in JavaScript:
const user = {
name: "Daniel",
age: 26,
};
user.location; // undefined : no crash
TypeScript still flags it:
const user = {
name: "Daniel",
age: 26,
};
user.location;
// Error: Property 'location' does not exist on type '{ name: string; age: number; }'.
It also catches typos, uncalled functions, and unreachable logic:
const announcement = "Hello World!";
announcement.toLocaleLowercase(); // typo
announcement.toLocalLowerCase(); // typo
announcement.toLocaleLowerCase(); // correct
function flipCoin() {
return Math.random < 0.5;
// Error: Operator '<' cannot be applied to types '() => number' and 'number'.
// (forgot to call Math.random())
}
Types for tooling
Once TypeScript knows your types, the editor can offer completions, jump-to-definition, find-all-references, and quick fixes. That tooling is built on the same type-checker.
What you will learn
This module follows the official TypeScript Handbook and adds decorators:
| Lesson | Focus |
|---|---|
Setup and tsc |
Install compiler, first .ts file, emit JS |
| Explicit types | Annotations, erased types, downleveling, strictness |
| Everyday types | string, number, boolean, arrays, any |
| Functions | Parameter and return types, contextual typing |
| Object types | Shapes, optional properties |
| Unions and aliases | A | B, narrowing intro, type aliases |
| Interfaces | Naming object shapes, vs type |
| Assertions and literals | as, literal unions, null / undefined |
| Narrowing | Type guards, truthiness, discriminated unions |
| Classes | Fields, inheritance, visibility, abstract |
| Generics | Type parameters, constraints, generic classes |
| Decorators | @decorator on classes and members |
Official references: