Базовые типы и вывод типов

В JavaScript переменная сегодня может хранить число, завтра строку, а послезавтра объект — и никто не возразит. В маленьком скрипте это удобно, а в большой программе приводит к путанице: чтобы узнать, что лежит в score, приходится прослеживать весь код. В TypeScript у каждой переменной есть тип, и он не меняется всю её жизнь. А самое приятное — чаще всего типы даже не нужно писать самому.

Примитивные типы

У каждого примитивного значения, знакомого тебе по курсу JavaScript, в TypeScript есть свой тип. Чаще всего используются три: string для текста, number для любых чисел — целых и дробных — и boolean для true/false. Имена типов пишут строчными буквами.

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

Вывод типов

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';
  ~~~~~

Если навести курсор на переменную в редакторе, ты увидишь выведенный тип: let score: number. Правило простое: если переменная сразу получает значение, тип не пиши — вывода достаточно. Пиши типы для переменных, объявленных без значения, и для параметров функций — о них пойдёт речь в следующем уроке.

Массивы и кортежи

Тип массива записывают как тип элементов с квадратными скобками: number[] — массив чисел. То же самое можно написать как Array<number>. Кортеж (tuple) — это массив, у которого заранее известны длина и тип каждой позиции: [string, number] — сначала строка, потом число, ровно два элемента.

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 и unknown

Иногда тип значения заранее неизвестен — например, оно приходит с сервера или из JSON.parse. Для этого есть два особых типа. any полностью отключает проверку: с таким значением можно написать любую операцию, а ошибки снова всплывут во время выполнения. unknown означает «пока не знаю»: в него можно положить любое значение, но перед использованием его тип обязательно нужно проверить.

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();
  ~~~~~~~~~~

Правильная работа с unknown выглядит так: сначала проверяешь тип через typeof, а внутри блока if TypeScript уже точно знает тип значения.

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

Литеральные типы

Типом может быть и одно конкретное значение. Тип 'left' | 'right' принимает только одну из этих двух строк; знак | означает «или». Такие литеральные типы защищают от опечаток, а редактор сам подсказывает допустимые значения. Интересно, что при записи const planet = 'Earth' тип planet — не string, а именно 'Earth': константа ведь никогда не изменится. С let тип был бы 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';
  ~~~~~~~~~