TypeScript course · Part 1: The basics · lab 1 of 5
TypeScript from zero
What TypeScript adds to JavaScript, writing your first annotations, making the compiler catch a real mistake, describing the shape of your data, and handling values that might be missing.
By the end you can
- Say what TypeScript does and what it does not do
- Annotate variables, parameters and return types, and let it infer the rest
- Turn a runtime bug into a compile error on purpose
- Describe the shape of your data, and deal with values that might be missing
Easier if you did first
step 1 of 4
Your first annotations
TypeScript is JavaScript with types added. Every valid JavaScript file is already valid TypeScript; the types are extra information for a program called the compiler, which reads your code and tells you where it contradicts itself.
Nothing you write in types exists when the code runs. The compiler checks, then strips every annotation away and leaves plain JavaScript. That is worth saying twice, because it explains the limits: TypeScript cannot check what a server sends you at three in the morning. It checks what your own code claims.
An annotation is a colon and a type: const price: number = 600. Most of the time you can leave it out, because TypeScript works the type out from the value, which is called inference.
The place you must annotate is a function's parameters, because the compiler cannot know what callers will pass. Return types are optional and worth writing anyway: they make the compiler check the function against your intention rather than just describing whatever it happens to return.
In this lab the real compiler checks your answer on the server with strict mode on, and the panel below shows exactly what it says. Then your code runs, so both the types and the behaviour are tested.
The code on the right has one wrong annotation and one missing one. Fix both.
const price: number = 600;
const plan: string = "Starter";
const active: boolean = true;
function totalFor(guests: number, rate: number): number {
return guests * rate;
}
const inferred = 600; // already number, no annotation neededWhat these words mean
- annotation
- A colon and a type, saying what a value is allowed to be.
- inference
- TypeScript working the type out for itself from the value.
- compiler
- The program that checks your types, then strips them out.
- strict mode
- The settings that make TypeScript actually useful. On here, and on in any sane project.
- number / string / boolean
- The three basic types you will use most.
Easy to get wrong
Thinking types protect you at runtime
They check your code, not your data
Every annotation is gone by the time the code runs. Data from a form or a server still has to be checked the way you did in the JavaScript labs.
Annotating everything, including obvious values
Annotating parameters, and letting inference do the rest
const price: number = 600 says nothing the compiler did not already know, and the noise makes the annotations that matter harder to see.
What we check
- The compiler reports no errors
- plan is annotated as a string
- The parameter has a type
- It still works: 20 guests at 600
- The plan is printed
Nothing printed yet. Run your code.