Зачем нужен TypeScript

Представьте таможню на границе. Каждая посылка едет с декларацией — бумагой, где написано, что лежит внутри. У получателей свои правила: магазин посуды принимает только посуду. Таможенник сверяет декларацию с правилом получателя ещё до того, как посылка пересечёт границу. Если книги едут в магазин посуды, ошибку найдут на границе, а не в магазине.

Когда все посылки проверены, декларации выбрасывают. Внутри страны их больше никто не читает: проверка уже была.

В JavaScript таможни нет. Посылку вскрывают, только когда она доехала до получателя, то есть когда выполняется строка, которая её использует. Вот функция, которая показывает цену с двумя знаками после точки:

function formatPrice(price) {
    return price.toFixed(2);
}

console.log(formatPrice(100));
console.log(formatPrice("100")); // ✗

TypeError: price.toFixed is not a function

Давайте разберём, что произошло:

1. formatPrice(100) печатает 100.00: у числа есть метод toFixed.
2. formatPrice("100") получает строку. У строки метода toFixed нет, и программа останавливается с ошибкой.
3. Значение из поля формы на странице приходит в программу строкой. Если вы проверяли функцию только на числах, ошибку увидит пользователь, который заполнит форму.

Знак ✗ в комментарии отмечает строку с ошибкой — так будет во всех примерах курса.

Проверка до запуска

TypeScript добавляет к JavaScript таможню. Декларации в коде — это типы, а таможенник — компилятор tsc, программа, которая проверяет типы до запуска. Та же функция на TypeScript:

function formatPrice(price: number): string {
    return price.toFixed(2);
}

console.log(formatPrice(100));
console.log(formatPrice("100")); // ✗

error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Что изменилось:

• price: number — правило получателя: функция принимает только числа.
• : string после скобок обещает, что функция вернёт строку.
• В последней строке строку передают туда, где ждут число, и tsc сообщает об этом ещё до запуска: «аргумент типа string нельзя передать параметру типа number».

Запись : number после имени — аннотация типа: декларация, которая говорит, какие значения здесь допустимы. Редактор подчеркнёт ошибочную строку прямо во время набора, задолго до того, как программу откроет пользователь.

Статическая и динамическая типизация

Языки различаются тем, когда они узнают, что типы не совпали.

Динамическая типизация

В JavaScript тип есть у значения, а не у переменной. Есть ли у значения метод toFixed, выясняется во время работы программы, в момент, когда выполняется строка. Это динамическая типизация. Строку, до которой выполнение ни разу не дошло, никто не проверял.

Статическая типизация

TypeScript проверяет типы по тексту программы, до запуска. Это статическая типизация. У параметра price есть тип, и tsc сверяет с ним каждое значение, которое туда передают. Он читает весь файл и проверяет каждую строку, даже ту, что выполняется раз в год.

TypeScript — это JavaScript с типами

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

Браузер и Node.js выполняют JavaScript. Поэтому после проверки tsc превращает файл TypeScript в обычный JavaScript и убирает из него типы — как декларации, которые выбрасывают после границы. Типы работают до запуска, а во время работы программы их уже нет.

Здесь картинка расходится с настоящей таможней. Таможенник может вскрыть посылку и посмотреть, что внутри, а tsc ничего не вскрывает. Он читает только текст программы и сверяет одни декларации с другими.

Чем TypeScript отличается от JavaScript

Этот вопрос часто задают на собеседовании, причём одним из первых. Ответ состоит из четырёх частей:

• TypeScript — это JavaScript с аннотациями типов;
• типы проверяет компилятор tsc по тексту программы, до её запуска;
• после проверки tsc пишет обычный JavaScript, из которого типы убраны;
• любой код на JavaScript — это и код на TypeScript.

Главное

• JavaScript узнаёт о неверном типе, только когда выполняется строка с ним, — иногда уже у пользователя.
• TypeScript — это JavaScript с аннотациями типов, такими как price: number.
• Компилятор tsc проверяет типы до запуска, по тексту программы: это статическая типизация.
• После проверки tsc пишет обычный JavaScript без типов.