Что такое TypeScript?

Добро пожаловать на курс TypeScript! Вы знаете JavaScript, а значит, знаете и то, как легко в программу проникает мелкая ошибка: опечатка в названии свойства, число, записанное как строка, переменная, в которой лежит не то, что вы ожидали. JavaScript не жалуется. Он запускает программу, а ошибка проявляется позже: странным undefined, значением NaN или сбоем, часто далеко от строки, которая её вызвала. Иногда она не проявляется вовсе, и программа просто молча выдаёт неверный результат.

TypeScript — это JavaScript с типами. Тип говорит, что за значение перед вами: число, строка, true или false, список названий предметов или объект с именем и здоровьем. TypeScript знает тип каждого значения в вашей программе и проверяет, что вы используете его правильно. И делает это до запуска программы. Вот герой и одна строка с опечаткой:

const hero = { name: "Кира", health: 50 };
console.log(hero.helth);

JavaScript вывел бы undefined и пошёл бы дальше как ни в чём не бывало. TypeScript вообще не запускает программу. Вместо этого он сообщает, что не так и где:

main.ts(2,18): error TS2551: Property 'helth' does not exist on type '{ name: string; health: number; }'. Did you mean 'health'?

В строке 2 у героя нет свойства helth. Может быть, вы имели в виду health? В этом уроке вы научитесь читать такие сообщения.

TypeScript создала компания Microsoft, а его первая версия вышла в 2012 году. Сегодня это один из самых популярных языков программирования в мире, и на нём написано множество больших JavaScript-проектов. Например, редактор кода Visual Studio Code написан на TypeScript. Программисты любят его по двум причинам: типы ловят ошибки заранее и подсказывают каждому, кто читает код, что за значение перед ним.

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

Но браузеры не умеют запускать TypeScript, только JavaScript. Поэтому программа на TypeScript сначала проходит через компилятор. Компилятор проверяет типы, а затем превращает программу в JavaScript: убирает типы, и остаётся обычный JavaScript, который работает так, как вы привыкли. Файлы с программами на TypeScript заканчиваются на .ts, а не на .js. Здесь ваша программа лежит в файле main.ts.

На этом сайте компилятор работает прямо в вашем браузере: это tsrs, версия компилятора TypeScript 7, приспособленная для работы на веб-странице. Когда вы нажимаете Запустить, он сначала проверяет программу. Если находит ошибку типов, программа вообще не запускается, а ошибку вы видите красным под выводом. Запускается только программа без ошибок типов, и тогда она работает так же, как на курсе JavaScript.

Что впереди? Сначала вы узнаете основные типы и то, как TypeScript определяет их сам, и добавите типы функциям и объектам. Затем пойдут возможности, которые делают TypeScript по-настоящему сильным: значения, которые могут быть одного из нескольких типов, данные, смоделированные так, что невозможные сочетания нельзя даже записать, обобщения (generics), которые работают с любым типом, и классы. Примеры взяты из ролевой игры: следопыт Кира, её зелья, мечи и золото, гоблины, волки, дракон и квесты. В итоговом проекте вы соберёте всё вместе в инвентарь и журнал квестов Киры и увидите, как TypeScript находит все места в программе, которые нужно изменить, когда вы добавляете что-то новое.

Но сначала убедимся, что JavaScript здесь работает так, как вы привыкли. Программа в редакторе — это обычный JavaScript без единого типа, и тем не менее это допустимая программа на TypeScript.