Basic types and inference

In JavaScript a variable can hold a number today, a string tomorrow and an object the day after — nobody complains. In a small script that is convenient, but in a big program it causes confusion: to know what is inside score, you have to trace the whole code. In TypeScript every variable has a type, and it stays the same for the variable's whole life. The best part: most of the time you don't even have to write the types yourself.

Primitive types

Each of the primitive values you know from the JavaScript course has its own type in TypeScript. The three you will use most are string for text, number for any number — whole or fractional — and boolean for true/false. Type names are written in lowercase.

let city: string = 'Baku';
let temperature: number = 23.5;
let isSunny: boolean = true;

temperature = 25;
console.log(`${city}: ${temperature}°C, sunny: ${isSunny}`);

Baku: 25°C, sunny: true

Type inference

let score = 10;
score = score + 5;
score = 'fifteen';

score.ts:3:1 - error TS2322: Type 'string' is not assignable to type 'number'.

3 score = 'fifteen';
  ~~~~~

If you hover over a variable in your editor, you will see the type TypeScript inferred: let score: number. The rule is simple: if you give a variable a value right away, don't write the type — inference is enough. Write types for variables declared without a value and for function parameters, which we will cover in the next lesson.

Arrays and tuples

An array type is written as the element type followed by square brackets: number[] is an array of numbers. You can also write the same thing as Array<number>. A tuple is an array whose length and the type of each position are known in advance: [string, number] means a string, then a number, and exactly two elements.

const scores: number[] = [90, 75, 88];
const names: Array<string> = ['Aysel', 'Murad'];
scores.push(100);

const entry: [string, number] = ['Leyla', 17];
const [name, age] = entry;

console.log(scores.length, names[1]);
console.log(`${name} is ${age}`);

4 Murad
Leyla is 17

const scores: number[] = [90, 75, 88];
scores.push('ninety');

const point: [number, number] = [40.4, 49.9, 0];

lists.ts:2:13 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

2 scores.push('ninety');
              ~~~~~~~~

lists.ts:4:7 - error TS2322: Type '[number, number, number]' is not assignable to type '[number, number]'.
  Source has 3 element(s) but target allows only 2.

4 const point: [number, number] = [40.4, 49.9, 0];
        ~~~~~

any and unknown

Sometimes a value's type is not known in advance — for example, it comes from a server or from JSON.parse. There are two special types for this. any switches checking off completely: you can write any operation with such a value, and the mistakes show up at runtime again. unknown means “I don't know yet”: any value can be stored in it, but you must check its type before you use it.

let risky: any = 'hello';
let fromServer: unknown = 'hello';

risky.toFixed(2);
fromServer.toUpperCase();

data.ts:5:1 - error TS18046: 'fromServer' is of type 'unknown'.

5 fromServer.toUpperCase();
  ~~~~~~~~~~

This is how you work with unknown correctly: first you check with typeof, and inside the if block TypeScript knows the value's exact type.

function describe(value: unknown): string {
  if (typeof value === 'string') {
    return `a string of length ${value.length}`;
  }
  if (typeof value === 'number') {
    return `the number ${value.toFixed(1)}`;
  }
  return 'something else';
}

console.log(describe('Baku'));
console.log(describe(3.14159));
console.log(describe(true));

a string of length 4
the number 3.1
something else

Literal types

A type can also be one exact value. The type 'left' | 'right' accepts only one of these two strings; the | sign means “or”. Such literal types protect you from typos, and the editor suggests the possible values by itself. Interestingly, when you write const planet = 'Earth', the type of planet is not string but exactly 'Earth' — after all, a constant will never change. With let the type would be string.

let direction: 'left' | 'right' = 'left';
direction = 'right';
direction = 'up';

direction.ts:3:1 - error TS2322: Type '"up"' is not assignable to type '"left" | "right"'.

3 direction = 'up';
  ~~~~~~~~~