TypeScript за последние годы превратился в один из самых востребованных языков веб-разработки, и это произошло совсем не случайно. По своей сути TypeScript не является полностью новым языком — это надстройка над JavaScript, которая добавляет к нему систему типов. Всё, что вы пишете, в конечном итоге остаётся обычным JavaScript, однако благодаря компилятору вы получаете возможность отлавливать множество ошибок ещё до того, как код будет запущен. Этот язык, разработанный компанией Microsoft, сегодня стал стандартным инструментом в большинстве проектов на React, Angular, Vue и Node.js.
Зачем нужен TypeScript
Поскольку JavaScript является языком с динамической типизацией, заранее невозможно определить, какое именно значение будет храниться в переменной. Для небольших скриптов это удобно, но по мере роста проекта превращается в источник проблем. Например, если вы случайно передадите в функцию строку вместо числа, JavaScript сообщит об ошибке только во время выполнения, зачастую уже тогда, когда пользователь откроет страницу. TypeScript же подсветит эту ошибку красной линией прямо в редакторе, пока вы ещё пишете код.
Кроме того, информация о типах позволяет редактору предлагать умное автодополнение. Редактор сам знает, какие поля есть у объекта и какие аргументы ожидает функция, и подсказывает их вам. При работе в большой команде это особенно важно, потому что типы превращают сам код в документацию, и другие разработчики сразу понимают, как пользоваться вашей функцией. Именно по этим причинам в крупных проектах TypeScript стал практически обязательным.
Аннотации типов и базовые понятия
Начать работать с TypeScript очень просто, ведь любой корректный код на JavaScript уже считается корректным TypeScript. Первый шаг — это добавление аннотаций типов к переменным и функциям. В примере ниже мы явно указываем, что функция принимает два числа и возвращает число, поэтому при передаче неверного типа компилятор немедленно предупредит вас об ошибке.
function summa(a: number, b: number): number {
return a + b;
}
let imya: string = "Азиз";
let vozrast: number = 25;
let aktiven: boolean = true;
summa(5, 10); // верно
summa(5, "10"); // ошибка: string не numberДля более сложных структур применяются interface и type. Interface описывает форму объекта, то есть какие у него есть поля и какого они типа. Type выполняет похожую задачу, но дополнительно подходит для объединённых типов и других сложных комбинаций, что делает его более гибким инструментом.
interface Polzovatel {
id: number;
imya: string;
email?: string; // необязательное поле
}
type Status = "active" | "blocked" | "pending";
function privet(u: Polzovatel): string {
return "Привет, " + u.imya;
}Объединённые типы и обобщения
Объединённые типы, или union, означают, что одна переменная может хранить значения нескольких разных типов. Тип Status выше является хорошим примером: переменная может принять лишь одно из трёх конкретных значений, и при попытке записать другую строку возникнет ошибка. Обобщения, или generics, — это самый мощный инструмент для повторного использования кода, который позволяет передавать тип в функцию как параметр.
function perviy<T>(massiv: T[]): T {
return massiv[0];
}
const chislo = perviy<number>([1, 2, 3]); // number
const slovo = perviy<string>(["a", "b"]); // stringЗдесь T обозначает любой тип, и функция подстраивается под тот тип, с которым её вызвали. Таким образом одна функция безопасно работает и с числами, и со строками, и с объектами, при этом каждый раз сохраняя информацию о типе и не теряя её на выходе.
Перевод проекта с JavaScript на TypeScript
Существующий проект на JavaScript вовсе не обязательно переписывать целиком за один раз. Большинство команд выбирают постепенный подход: сначала создают файл tsconfig.json, а затем по одному переводят файлы на расширение .ts. Процесс компиляции выполняется командой tsc, которая превращает код на TypeScript в обычный JavaScript, понятный браузеру и Node.js.
# установка TypeScript
npm install -D typescript
# создание конфигурации
npx tsc --init
# компиляция кода
npx tscВ ходе этого процесса рекомендуется включить строгий режим strict, поскольку он активирует самые жёсткие проверки и предотвращает множество будущих проблем. Поначалу это может выдавать чуть больше предупреждений, но в долгосрочной перспективе заметно повышает качество кода и надёжность всего приложения.
Сильные стороны и когда он не нужен
TypeScript делает код надёжнее, рано отлавливает ошибки и упрощает совместную работу в больших командах. Вместе с тем у него есть кривая обучения, и он добавляет в проект дополнительную настройку и этап компиляции. Если вы пишете совсем маленький одноразовый скрипт или быстро создаёте прототип, обычного JavaScript может оказаться вполне достаточно. Однако для любого серьёзного продукта, который будет расти, поддерживаться месяцами или годами и над которым работает несколько разработчиков, TypeScript становится выбором, оправдывающим вложенные усилия. Именно поэтому многие компании предпочитают начинать новые проекты сразу на TypeScript, не откладывая переход на потом.