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

Что такое TypeScript простыми словами

TypeScript расширяет JavaScript синтаксисом типов. Язык развивает Microsoft. Статическая типизация помогает проверить данные до запуска: цена товара должна быть числом, название строкой, признак наличия логическим значением.

TypeScript помогает замечать ошибки при изменениях. Допустим, вы переименовали поле карточки товара. Компилятор укажет обращения к старому имени, если тип объекта известен. Это полезно, когда каталог связан с корзиной и оформлением заказа.

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

В JavaScript динамическая типизация: переменная может сначала хранить число, затем строку. TypeScript добавляет статический анализ исходного кода. Он проверяет совместимость типов до запуска, опираясь на известные компилятору сведения.

Допустимый синтаксис JavaScript ещё не означает, что код пройдёт проверку типов. Например, чтение неизвестного свойства объекта может вернуть undefined. TypeScript заранее сообщит об ошибке, если знает структуру объекта.

Где используется TypeScript

Рассмотрите TypeScript для личного кабинета, интернет-магазина или системы обработки заявок. В таких приложениях удобно описывать пользователя, заказ, оплату и состояние формы. Общие определения помогают согласовать взаимодействие разных частей программы.

TypeScript подходит для браузерных интерфейсов и серверного кода на Node.js. В React можно типизировать свойства компонентов. Файлы с JSX сохраняют как .tsx и настраивают параметр jsx. Обычные файлы TypeScript имеют расширение .ts.

Как установить TypeScript и запустить первый файл

Подготовьте Node.js, npm и редактор кода. В новой папке выполните npm init -y, затем npm install --save-dev typescript. Компилятор установится в проект, и его версию можно будет согласовать с другими разработчиками.

Сохраните пример ниже в hello.ts. Выполните npx tsc hello.ts --strict --ignoreConfig --noEmitOnError, затем node hello.js. Первая команда проверит код и при отсутствии ошибок создаст hello.js. Флаг --ignoreConfig отключает чтение конфигурации проекта; --noEmitOnError запрещает выпуск при ошибках.

Функция greet принимает параметр name типа string и возвращает строку через return. Вызов console.log выводит результат в консоль. Попробуйте передать число вместо имени: TypeScript сообщит о несовместимом аргументе. После эксперимента верните строку и снова запустите проверку.

function greet(name: string): string {
  return 'Здравствуйте, ' + name;
}

console.log(greet('Анна'));

Типы данных TypeScript

Тип в TypeScript ограничивает допустимые значения и операции. Аннотация ставится после имени через двоеточие. Например, запись let age: number задаёт числовую переменную. Обозначение name: string подходит для имени пользователя.

В TypeScript не обязательно указывать тип каждой переменной. Компилятор часто выводит его из начального значения. После let age = 25 присваивание строки вызовет ошибку типов.

Используйте const без переприсваивания и let для изменяемого значения. TypeScript сохраняет эти правила JavaScript. Начните с понятных типов данных: string для названия, number для количества, boolean для переключателя.

Функции и интерфейсы TypeScript

В TypeScript объявление function описывает функцию. Укажите number после списка параметров, если результат должен быть числом. Через return верните вычисленное значение. Компилятор обнаружит попытку вернуть строку. Названия параметров выбирайте по смыслу задачи.

Ключевое слово interface задаёт структуру объекта. В примере User содержит name: string и age: number. Функция nextAge принимает объект user и возвращает возраст, увеличенный на единицу.

Псевдоним type тоже позволяет описывать объекты. Он подходит и для объединений, например string | number. Интерфейсы TypeScript поддерживают объединение одноимённых объявлений; псевдонимы так дополнить нельзя. Для проекта выберите понятные соглашения и соблюдайте их при добавлении моделей.

interface User {
  name: string;
  age: number;
}

function nextAge(user: User): number {
  return user.age + 1;
}

const user: User = { name: 'Анна', age: 25 };
console.log(nextAge(user));

Массивы, кортежи и коллекции TypeScript

Массив User[] хранит объекты одного типа. Кортеж [string, number] описывает пару: название товара и количество. Порядок элементов имеет значение. Обычный массив допускает изменение длины; кортеж помогает проверить известные позиции при написании кода.

Словарь с описанием { [key: string]: number } связывает строковые ключи с числами. Map<string, number> хранит пары ключей и значений, Set<string> хранит строки без повторов. Map и Set принадлежат JavaScript; TypeScript добавляет проверку типов их содержимого. Поддержку коллекций в среде запуска проверяйте отдельно.

Объединения и дженерики TypeScript

Объединение разрешает несколько вариантов значения. Перед операцией со строкой или числом уточните тип через typeof. TypeScript учитывает проверку в соответствующей ветке. Это называется сужением типа.

Для повторяющихся проверок можно написать функцию с предикатом типа, используя слово is. Однако TypeScript доверяет её объявлению. Код внутри должен действительно проверять нужные свойства. Ошибка в такой функции способна сделать дальнейшие обращения небезопасными.

Обобщённые типы, или дженерики, связывают тип входных данных с результатом. Функция wrap упаковывает значение в объект. Параметр T сохраняет исходный тип: после wrap(3) свойство value имеет тип number.

function wrap<T>(value: T): { value: T } {
  return { value };
}

const quantity = wrap(3);
console.log(quantity.value);

unknown и объединения с признаком варианта

В TypeScript any разрешает обращаться к значению почти без проверок. unknown требует сначала выяснить его тип. Например, в catch проверьте err instanceof Error перед чтением err.message. Брошенное исключение может оказаться строкой или другим значением.

Для ответа сервера удобно объединение с общим полем status. Литеральные типы ограничивают это поле конкретными строками. Проверка status позволяет TypeScript выбрать вариант и разрешить доступ к его полям. Пример ниже обрабатывает уже проверенные данные; реальный JSON сначала нужно проверить при получении.

void обозначает результат функции, который вызывающий код не использует. never описывает невозможное значение и помогает проверить, что обработаны все варианты объединения. enum задаёт именованные значения, но обычное перечисление требует генерации JavaScript, в отличие от аннотаций типов.

type Reply =
  | { status: 'ok'; total: number }
  | { status: 'error'; message: string };

function describe(reply: Reply): string {
  if (reply.status === 'ok') {
    return String(reply.total);
  }
  return reply.message;
}

console.log(describe({ status: 'ok', total: 3 }));

Классы TypeScript и редактор кода

TypeScript поддерживает объектно-ориентированное программирование: объявление class создаёт класс с состоянием и методами. Интерфейс задаёт ожидаемую структуру. Через this метод обращается к текущему экземпляру. Например, так можно реализовать корзину с товарами и расчётом суммы.

В TypeScript за подсказки отвечает языковой сервис: он показывает свойства, параметры функций и места использования имени. Это помощь при изменениях большого проекта. Описания внешних библиотек находятся в файлах .d.ts: они содержат сведения о типах, без реализации функций. Если пакет не включает их, проверьте наличие соответствующего пакета @types.

Компиляция TypeScript

При обычной сборке TypeScript преобразуется в JavaScript. Аннотации типов удаляются и не проверяют данные во время работы приложения. Настройки компилятора определяют преобразование синтаксиса под выбранный стандарт JavaScript. Это отдельная задача от анализа совместимости значений.

Node.js умеет запускать TypeScript с удалением типов, но без их проверки и чтения tsconfig.json. В этом режиме enum и свойства параметров конструктора не поддерживаются: им нужно преобразование кода. Файлы .tsx тоже не поддерживаются встроенным удалением типов.

Проверяйте внешние данные отдельно. Ответ сервера, значение поля формы или содержимое файла может отличаться от вашего описания. Утверждение as не превращает строку в число и не подтверждает правильность объекта. Нужен разбор фактических значений.

Настройка TypeScript через tsconfig.json

Команда npx tsc --init создаёт конфигурацию проекта. Затем запускайте npx tsc без имени отдельного файла, чтобы применять эту конфигурацию. Для проверки без выпуска JavaScript используйте npx tsc --noEmit.

В TypeScript параметр strict объединяет строгие проверки. Среди них контроль неявного any и работа с null и undefined. Лучше явно согласовать режим проекта, чем полагаться на случайные настройки редактора. Для существующего сайта сначала оцените диагностические сообщения и объём исправлений.

• target: стандарт JavaScript для преобразования синтаксиса.
• module: правила генерации модулей с учётом среды запуска.
• outDir: папка для выходных файлов.
• noEmitOnError: запрет выпуска файлов при ошибках проверки.
• allowJs: включение файлов JavaScript в проект.
• checkJs: сообщения об ошибках в подключённых файлах JavaScript.

Что изменилось в TypeScript 7.0

На сентябрь 2026 года опубликован TypeScript 7.0. Microsoft объявила выпуск 8 июля 2026 года. Компилятор и языковой сервис перенесены на Go. В анонсе приведено ускорение полной сборки примерно от 8 до 12 раз на рассмотренных проектах.

Измерения относятся к сборке, а не к скорости сайта у посетителя. Перед обновлением проверьте совместимость инструментов и измерьте время сборки своего проекта.

В TypeScript 7.0 strict включён по умолчанию. Программного API компилятора в этом выпуске нет. В июльском анонсе новый API запланирован для версии 7.1. Наличие нужной интеграции проверяйте по документации конкретного инструмента.

Преимущества и ограничения TypeScript

TypeScript помогает менять связанные данные: после переименования поля компилятор укажет обращения к старому имени. Но определения типов тоже нужно поддерживать. Для короткого скрипта без сложных данных стоимость настройки может перевесить пользу.

Частая ошибка при внедрении TypeScript: закрывать все замечания через any. Этот тип отключает значительную часть проверок для соответствующего значения. Сначала выясните, какие данные действительно приходят. Затем уточните описание или добавьте проверку на границе приложения.

Другая ошибка: считать успешную компиляцию подтверждением бизнес-логики. Например, сумма заказа может иметь тип number, но вычисляться без скидки. Для тестирования формулы нужен сценарий с известным результатом. Типы отвечают только за ту часть правил, которую вы выразили в программе.

• Не дублируйте описание одной сущности в нескольких местах без необходимости.
• Не подавляйте ошибку утверждением типа, пока не выясните её причину.
• Включите noEmitOnError, чтобы компилятор не выпускал файлы с ошибками типов.
• Не обновляйте компилятор без изучения зависимостей и запуска сборки.

Как перейти на TypeScript и чему учиться дальше

Начните с основ JavaScript: значений, функций, объектов и обработки ошибок. Затем изучите TypeScript на знакомой задаче. Так проще понять, зачем появился дополнительный синтаксис.

Начать можно без переименования файлов: добавьте // @ts-check в начало JavaScript-файла и опишите параметры через JSDoc. Для проверки всех подключённых JS-файлов используйте checkJs. Затем включите allowJs для совместной работы файлов .js и .ts и переводите модули постепенно.

Для первого знакомства откройте TypeScript Playground: https://www.typescriptlang.org/play. Вставьте пример, посмотрите ошибки и полученный JavaScript. Затем изучите официальный Handbook: https://www.typescriptlang.org/docs/handbook/intro.html. Там есть объяснения типов и примеры кода.

Для вашего проекта: «Разработка веб-приложений», /uslugi/veb-prilozheniya/. Подготовьте список экранов, интеграций и проблем кода. В seosite1 цена после брифа. Минимальный бюджет проекта от 50 тыс. ₽.