Command Palette

Search for a command to run...

Hectal
Phase 1Beginner2 of 18 in TypeScript

Basic Types and Annotations

Write types on variables, parameters and return values; learn the primitive types, inference, arrays, object shapes, any, unknown, null and undefined.

This phase teaches the small alphabet that every other TypeScript idea is built from: the annotation (: type), the seven primitive types, inference (TypeScript working types out for you), arrays, object shapes, and the two awkward values every language fights with: "anything" and "nothing".

You'll learn when to write a type yourself and when to let TypeScript do it, why any switches the safety net off while unknown keeps it on, and how null and undefined cause the most common crash in JavaScript and how TypeScript stops it.

Every example is checked by the real compiler. Predict the error first, then open the Types panel: it shows exactly the line tsc would print, and the Console shows what the program does when it runs anyway.

0/7 · 0%
7 topics ~2 h 20 code blocks & diagrams
Start with the first topic
1
1.1

Type Annotations

A type annotation is a colon and a type written after a name (age: number). It is a promise the checker holds you to on every line that uses the name.

19 min 2 code practice

2
1.2

The Primitive Types

Primitives are the simplest values: text, numbers, true/false, big integers, symbols, null and undefined. Each has a lowercase type name, and a value like "left" can also be a type of its own.

20 min 3 code practice

3
1.3

Type Inference

Inference means TypeScript works out a type from the code, so you usually don't write it. Knowing the rules (let widens, const stays exact, arrays join their element types) tells you when to add an annotation yourself.

22 min 3 code practice

4
1.4

Arrays

An array type says what every item is: number[] or Array<number>. With noUncheckedIndexedAccess, reading by position gives T | undefined, because TypeScript can't know the position exists.

20 min 2 code practice

5
1.5

Object Types

An object type lists the properties a value must have and the type of each: { name: string; age: number }. Properties can be optional (?) or read-only, and a fresh object literal may not carry unlisted extras.

21 min 3 code practice

6
1.6

any, unknown and Turning Off Safety

any switches type checking off for a value, and the switch spreads. unknown also means "could be anything", but forces you to check what it is before you use it, so the safety stays on.

19 min 4 code practice

7
1.7

null, undefined and strictNullChecks

With strictNullChecks (part of strict), null and undefined are not allowed everywhere. A value that might be missing says so in its type (T | null), and the checker makes you handle it before use.

21 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Annotate a Whole Function

Strict mode reports the parameters of perimeter because nobody typed them. Add a type to both parameters and a return type to the function.

Beginner
2

Allow Only Two Choices

The function turn accepts any text, so turn("up") is allowed. Change the parameter type so that only "left" and "right" are accepted.

Beginner
3

The List That Might Be Empty

firstWord promises a string, but with noUncheckedIndexedAccess the item words[0] is string | undefined. Fix the function so an empty list gives the text (none).

Beginner
4

Describe the Shape of a User

describe receives an object, but its parameter has no type. Give user an object type: a required name (text), a required age (number) and an optional email (text).

Beginner
5

Use unknown, Not any

safeLength should accept a value of any kind and return its length if it is text, or null otherwise. Type the parameter as unknown (not any), give the function a return type, and narrow before using .length.

Beginner
6

Total an Order With Optional Discounts

Each item has a price and an optional discount. total subtracts the discount, but the optional property may be missing and TypeScript reports it.

Beginner