Что такое TypeScript

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

🌍 Сначала вспомним: что такое JavaScript?

Прежде чем говорить о TypeScript, давайте на секунду вернёмся к JavaScript. Вы, конечно, уже знакомы с этим языком — он повсюду: на сайтах, в приложениях, на серверах. JavaScript — это язык программирования, который был создан в 1995 году компанией Netscape и с тех пор стал стандартом веб-разработки.

Основная идея JavaScript проста: вы пишете код, браузер (или Node.js) его выполняет. Не нужно ничего компилировать, не нужно ждать — код запускается мгновенно. Это делает JavaScript невероятно удобным для быстрой разработки.

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

// В JavaScript вы можете делать такое:
let переменная = 42;          // число
переменная = "привет";        // теперь строка!
переменная = true;            // теперь булево значение!
переменная = [1, 2, 3];       // теперь массив!
переменная = { name: "Анна" };// теперь объект!

// JavaScript не против. Он просто меняет тип переменной.

Заметили? Одна и та же переменная последовательно становится числом, строкой, булевым значением, массивом и объектом. JavaScript не ругается. Он просто делает то, что вы ему говорите. Звучит свободно, правда?

Проблема в том, что эта «свобода» приводит к багам. Когда переменная может быть чем угодно, вы можете случайно передать туда не тот тип данных — и программа начнёт вести себя странно.

// Функция, которая должна складывать два числа
function сложить(a, b) {
  return a + b;
}

// Вызываем с числами — всё работает:
сложить(5, 3);    // 8 ✓

// Но что мешает вызвать со строками?
сложить("5", 3);  // "53" — строка + число = конкатенация!

// Это баг! Функция должна работать с числами,
// но JavaScript молчапринял строку и склеил их.

Этот баг не вызовет ошибку в консоли. Программа продолжит работать, но результат будет неправильным. Вы можете не заметить его часами, днями, неделями. А потом обнаружите, что где-то в вычислениях у вас «53» вместо «8».

🔷 Что такое TypeScript?

TypeScript — это язык программирования, разработанный компанией Microsoft и представленный в 2012 году. Он создан на основе JavaScript и добавляет к нему один ключевой механизм — строгую систему типов.

Представьте, что JavaScript — это блокнот, куда вы можете записать что угодно. А TypeScript — это блокнот с графами и подсказками: «Туда можно записать только число», «Сюда — только текст». Он помогает вам не ошибаться.

Вот как выглядит та же функция сложения на TypeScript:

// TypeScript — строго типизированная версия
function сложить(a: number, b: number): number {
  return a + b;
}

// Теперь попробуем вызвать с строкой:
сложить("5", 3);
// Ошибка компиляции!
// Argument of type 'string' is not assignable to parameter of type 'number'

Видите разницу? Мы добавили к каждому параметру : number — это аннотация типа, которая говорит: «Этот параметр должен быть числом». И теперь, если кто-то попытается передать строку, TypeScript сразу покажет ошибку — ещё до запуска программы.

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

🔍 Главные отличия TypeScript от JavaScript

Давайте подробно разберём, что именно отличает TypeScript от JavaScript. Это поможет вам понять, почему TypeScript стал так популярен и почему его стоит изучать.

Давайте рассмотрим каждое отличие подробнее с примерами.

🏷️ Аннотации типов

Аннотация типа — это способ сказать TypeScript, какой тип данных ожидается. Вы уже видели пример с : number. Давайте посмотрим на другие типы:

// Строка
let имя: string = "Алексей";

// Число
let возраст: number = 25;

// Булево значение
let студент: boolean = true;

// Массив чисел
let оценки: number[] = [5, 4, 5, 3, 5];

// Массив строк
let навыки: string[] = ["JavaScript", "TypeScript", "React"];

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

Теперь, если вы попытаетесь присвоить строку переменной возраст, TypeScript покажет ошибку:

let возраст: number = 25;
возраст = "двадцать пять";  // ❌ Ошибка компиляции!
// Type 'string' is not assignable to type 'number'

🛡️ Проверка типов

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

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

function получитьПриветствие(имя: string): string {
  return `Привет, ${имя}!`;
}

// ✅ Всё работает — передаём строку
получитьПриветствие("Мария");  // "Привет, Мария!"

// ❌ Ошибка — передаём число вместо строки
получитьПриветствие(42);
// Argument of type 'number' is not assignable to parameter of type 'string'

📝 Интерфейсы и собственные типы

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

// Создаём интерфейс (тип объекта)
interface Пользователь {
  имя: string;
  возраст: number;
  email: string;
}

// Теперь функция точно знает, какой объект ожидается
function показатьПользователя(пользователь: Пользователь): void {
  console.log(`Имя: ${пользователь.имя}`);
  console.log(`Возраст: ${пользователь.возраст}`);
  console.log(`Email: ${пользователь.email}`);
}

// ✅ Всё верно — объект соответствует интерфейсу
показатьПользователя({
  имя: "Анна",
  возраст: 22,
  email: "anna@example.com"
});

// ❌ Ошибка — не хватает поля email
показатьПользователя({
  имя: "Борис",
  возраст: 30
});
// Property 'email' is missing

🔧 Дополнительные возможности

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

Enum (перечисления) — способ задать набор именованных значений:

// Вместо магических строк или чисел используем enum
enum ДеньНедели {
  Понедельник,
  Вторник,
  Среда,
  Четверг,
  Пятница,
  Суббота,
  Воскресенье
}

let сегодня: ДеньНедели = ДеньНедели.Понедельник;
console.log(сегодня); // 0 (первый элемент)

Кортежи (tuples) — массив фиксированной длины с определёнными типами:

// Кортеж — массив, где каждый элемент имеет свой тип
let пользователь: [string, number] = ["Анна", 25];

// ✅ Порядок и типы совпадают
// ❌ Нельзя нарушить порядок или тип
let неверно: [string, number] = [25, "Анна"]; // ошибка!

Generics (обобщения) — способ создавать функции и классы, работающие с любыми типами:

// Функция, которая работает с любым типом
function перваяЭлемент<T>(массив: T[]): T {
  return массив[0];
}

// Работает с числами
числаПервый = перваяЭлемент([1, 2, 3]); // 1

// Работает со строками
строкаПервая = перваяЭлемент(["а", "б", "в"]); // "а"

Эти возможности мы будем изучать подробнее в последующих уроках. Пока главное — понять, что TypeScript значительно расширяет возможности JavaScript.

💪 Зачем нужен TypeScript?

Теперь, когда вы знаете, чем TypeScript отличается от JavaScript, давайте разберёмся, зачем его вообще используют. Ведь JavaScript и так работает, правда? Зачем добавлять лишний слой сложности?

Ответ прост: TypeScript решает реальные проблемы, с которыми сталкиваются разработчики каждый день. Давайте рассмотрим основные причины.

// Без TypeScript — ошибка только во время выполнения
function получитьДлину(строка) {
  return строка.length;
}

получитьДлину(42); // undefined — нет ошибки, но результат неверный!

// С TypeScript — ошибка сразу
function получитьДлину(строка: string): number {
  return строка.length;
}

получитьДлину(42);
// ❌ Ошибка: Аргумент типа 'number' не может быть присвоен параметру типа 'string'

interface Пользователь {
  имя: string;
  возраст: number;
  email: string;
  телефон?: string;
}

function показатьПользователя(пользователь: Пользователь) {
  // Когда вы печатаете "пользователь.",
  // редактор покажет подсказки:
  // • имя
  // • возраст
  // • email
  // • телефон

  console.log(пользователь.имя);
  // Редактор знает, что .имя — это string
  // и может предложить методы строк: .toUpperCase(), .length и т.д.
}

// Было:
interface Пользователь {
  имя: string;
  возраст: number;
}

// Стало:
interface Пользователь {
  имя: string;
  возраст: number;
  email: string;  // Добавили новое поле
}

// TypeScript сразу покажет все места, где создаётся Пользователь
// и где не хватает поля email

// Без типов — непонятно, что функция делает
function обработать(данные) {
  // Что за данные? Какой формат? Что возвращает?
}

// С типами — всё ясно сразу
function обработать(данные: { имя: string; возраст: number }): string {
  return `${данные.имя}, ${данные.возраст} лет`;
}
// Сразу видно: принимает объект с именем и возрастом, возвращает строку

// Команда работает над интернет-магазином:
// Фронтенд-разработчик знает:
interface Заказ {
  id: number;
  товары: Товар[];
  сумма: number;
  статус: "новый" | "оплачен" | "доставлен";
}

// Бэкенд-разработчик создаёт API:
function создатьЗаказ(заказ: Заказ): Promise<Заказ> {
  // Оба разработчика работают с одним и тем же типом
  // Недопонимание исключено!
}

⚙️ Как работает компиляция TypeScript

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

Представьте, что вы пишете письмо на русском языке, а получатель знает только английский. Вам нужен переводчик, который переведёт ваше письмо. TypeScript-компилятор играет роль такого переводчика.

// Вы пишете файл main.ts:
let возраст: number = 25;
let имя: string = "Анна";

function приветствие(имя: string, возраст: number): string {
  return `${имя}, тебе ${возраст} лет!`;
}

console.log(приветствие(имя, возраст));

Когда вы запускаете компилятор (tsc), он берёт этот файл и создаёт новый файл main.js — обычный JavaScript без аннотаций типов:

// Компилятор создаёт файл main.js:
let возраст = 25;
let имя = "Анна";

function приветствие(имя, возраст) {
  return `${имя}, тебе ${возраст} лет!`;
}

console.log(приветствие(имя, возраст));

Заметили? Все аннотации типов (: number, : string) исчезли. Компилятор удалил их, потому что JavaScript не нуждается в типах. Получился обычный JavaScript-код, который понимает любой браузер.

Процесс компиляции включает несколько этапов:

1. Лексический анализ — компилятор разбивает код на токены (слова, символы)
2. Синтаксический анализ — проверяет, что код соответствует грамматике TypeScript
3. Проверка типов — анализирует типы и находит ошибки
4. Генерация кода — создаёт JavaScript-версию без аннотаций типов

Важно понимать, что компиляция — это не одна мгновенная операция. Это процесс, который занимает время. Время зависит от размера проекта. Для небольших файлов это доли секунды. Для крупных проектов — несколько секунд.

# Компиляция одного файла
npx tsc main.ts

# Компиляция всего проекта (если есть tsconfig.json)
npx tsc

# Компиляция с наблюдением за изменениями
npx tsc --watch

Режим --watch особенно удобен: компилятор следит за изменениями файлов и автоматически перекомпилирует их при сохранении. Это экономит время разработки.

🛡️ Проверка типов: подробный разбор

Проверка типов — это сердце TypeScript. Давайте разберём, как она работает, какие виды проверок существуют и что происходит, когда TypeScript находит ошибку.

Типы проверок

TypeScript выполняет два вида проверки:

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

// Вы указали тип явно:
let имя: string = "Анна";

// Или TypeScript определит его сам:
let имя = "Анна";  // TypeScript понимает, что это string

// Оба варианта эквивалентны!
// Но второй — короче и чище

// TypeScript выводит тип возвращаемого значения:
function сложить(a: number, b: number) {
  return a + b;  // TypeScript понимает, что возвращает number
}

Что происходит при ошибке типа?

Когда TypeScript находит ошибку типа, он:

1. Показывает ошибку в редакторе кода (красное подчёркивание)
2. Пишет сообщение об ошибке с указанием строки и описанием проблемы
3. Предлагает возможные исправления (quick fixes)
4. Выводит ошибку в консоль при компиляции

// Пример ошибки типа
let возраст: number = 25;

// Ошибка: нельзя присвоить строку переменной числа
возраст = "молодой";
// ❌ Type 'string' is not assignable to type 'number'.

// Редактор покажет:
// 1. Красное подчёркивание под "молодой"
// 2. Всплывающее окно с описанием ошибки
// 3. Предложение: "Remove this type annotation"
// 4. Или: "Change declared type to 'string'"

Строгий режим (strict mode)

TypeScript имеет множество опций для настройки строгости проверок. Одна из важнейших — strict. Когда она включена, TypeScript применяет максимальную строгость проверок. Мы подробно разберём это в уроке про tsconfig.json.

// Пример из жизни — функция с undefined
function найтиПользователя(id: number) {
  // Представим, что пользователь может не найтись
  if (id === 0) {
    return undefined;
  }
  return { id, имя: "Анна" };
}

// TypeScript предупредит:
let результат = найтиПользователя(0);
// TypeScript понимает, что результат может быть undefined
// и будет ругаться, если вы попытаетесь сделать:
результат.имя;
// ❌ Object is possibly 'undefined'

🌐 TypeScript в современной разработке

TypeScript стал стандартом де-факто в современной веб-разработке. Давайте посмотрим, кто его использует и почему.

Практически все крупные фреймворки и библиотеки сегодня используют TypeScript или предоставляют для него типы:

• React — официально поддерживает TypeScript, документация на TS
• Vue — полная поддержка TypeScript с версии 3.x
• Angular — написан на TypeScript, recommends его использование
• Next.js — поддерживает TypeScript из коробки
• Node.js — поддерживает TypeScript через ts-node
• Deno — поддерживает TypeScript из коробки

Крупнейшие компании используют TypeScript в своих продуктах:

• Microsoft — создатель TypeScript, использует в VS Code, Azure
• Google — использует в Angular, Firebase, Google Cloud
• Slack — перешли на TypeScript, чтобы уменьшить количество багов
• Shopify — используют TypeScript в своих магазинах
• Airbnb — имеют стандарты TypeScript для всех проектов

Есть несколько причин такой популярности:

// 1. Безопасность — ошибки ловятся на этапе компиляции
// 2. Читаемость — код сам документируется
// 3. Автодополнение — редактор помогает писать код
// 4. Рефакторинг — изменения отражаются на всех местах использования
// 5. Командная работа — интерфейсы определяют контракты

По данным опроса State of JS 2023, TypeScript стабильно является одним из самых используемых и любимых языков среди веб-разработчиков. Его Adoption Rate (процент разработчиков, которые его используют или хотят попробовать) превышает 90%.

📝 Практический пример: JavaScript vs TypeScript

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

JavaScript-версия

// Функция для создания студента
function создатьСтудента(имя, возраст, оценки) {
  return {
    имя: имя,
    возраст: возраст,
    оценки: оценки
  };
}

// Функция для расчёта средней оценки
function средняяОценка(студент) {
  let сумма = 0;
  for (let оценка of студент.оценки) {
    сумма += оценка;
  }
  return сумма / студент.оценки.length;
}

// Форматирование информации о студенте
function показатьСтудента(студент) {
  return `${студент.имя}, возраст ${студент.возраст}, средняя оценка: ${средняяОценка(студент)}`;
}

// Проблемы:
// 1. Что если оценки — не массив?
// 2. Что если оценки содержат строки?
// 3. Что если имя — число?
// 4. JavaScript не предупредит ни об одной из этих проблем

Этот код работает. Но он хрупкий. Если кто-то передаст неправильные данные, программа начнёт вести себя странно — или упадёт в середине выполнения.

TypeScript-версия

// Определяем тип студента
interface Студент {
  имя: string;
  возраст: number;
  оценки: number[];
}

// Функция для создания студента
function создатьСтудента(
  имя: string,
  возраст: number,
  оценки: number[]
): Студент {
  return {
    имя,
    возраст,
    оценки
  };
}

// Функция для расчёта средней оценки
function средняяОценка(студент: Студент): number {
  let сумма = 0;
  for (let оценка of студент.оценки) {
    сумма += оценка;
  }
  return сумма / студент.оценки.length;
}

// Форматирование информации о студенте
function показатьСтудента(студент: Студент): string {
  return `${студент.имя}, возраст ${студент.возраст}, средняя оценка: ${средняяОценка(студент)}`;
}

// Теперь TypeScript защитит нас:
создатьСтудента("Анна", 20, [5, 4, 5, 3]);  // ✅
создатьСтудента("Борис", "двадцать", [5, 4]); // ❌ Ошибка типа
создатьСтудента("Вера", 19, ["пять", 4]);     // ❌ Ошибка типа

Видите разницу? TypeScript-версия намного надёжнее. Она чётко определяет, какие данные ожидает каждая функция, и сразу показывает ошибку, если данные не соответствуют ожиданиям.

Более того, в TypeScript-версии:

• Интерфейс Студент служит документацией — сразу понятна структура данных
• Редактор кода подсказывает доступные поля при наборе студент.
• Ошибка в типе данных будет поймана ещё до запуска программы
• При рефакторинге TypeScript покажет все места, которые нужно обновить

🔀 Кратко о различии type и interface

В TypeScript есть два способа создавать собственные типы: type и interface. На первый взгляд они похожи, но есть важные различия. Мы подробно разберём их позже, а пока — краткий обзор.

// Interface — описание структуры объекта
interface Пользователь {
  имя: string;
  возраст: number;
}

// Type — более гибкий способ создания типов
type ID = number | string;  //.union type

// Оба могут описывать объекты:
type ТочкаТип = {
  x: number;
  y: number;
};

interface ТочкаИнтерфейс {
  x: number;
  y: number;
}

Основные различия:

❌ Распространённые мифы о TypeScript

Давайте разберём несколько мифов, которые можно услышать о TypeScript. Понимание этих мифов поможет вам сделать осознанный выбор.

🎯 Когда TypeScript особенно полезен?

TypeScript приносит максимальную пользу в определённых сценариях. Давайте разберём, когда его использование особенно оправдано.

🎯 Итоговый пример: что вы уже можете написать

Посмотрите на этот пример. Даже изучив только базовые аннотации типов, вы уже можете писать более надёжный код:

// Описываем структуру книги
interface Книга {
  название: string;
  автор: string;
  год: number;
  страницы: number;
  жанр: string;
}

// Функция для форматирования информации о книге
function форматироватьКнигу(книга: Книга): string {
  return `"${книга.автор}" — «${книга.название}» (${книга.год}), ${книга.страниц} стр.`;
}

// Функция для поиска книг по году
function книгиПоГоду(книги: Книга[], год: number): Книга[] {
  return книги.filter(книга => книга.год === год);
}

// Функция для расчёта общего количества страниц
function общаяСтраниц(книги: Книга[]): number {
  return книги.reduce((сумма, книга) => сумма + книга.страницы, 0);
}

// Пример использования
const библиотека: Книга[] = [
  { название: "Война и мир", автор: "Толстой", год: 1869, страницы: 1225, жанр: "роман" },
  { название: "Преступление и наказание", автор: "Достоевский", год: 1866, страницы: 671, жанр: "роман" },
  { название: "Мастер и Маргарита", автор: "Булгаков", год: 1967, страницы: 480, жанр: "роман" }
];

console.log(форматироватьКнигу(библиотека[0]));
// "Толстой" — «Война и мир» (1869), 1225 стр.

console.log(общаяСтраниц(библиотека));
// 2376

Этот код:

• Самодокументирован — интерфейс Книга сразу объясняет структуру данных
• Защищён от ошибок — нельзя случайно передать книгу с пропущенным полем
• Поддерживается редактором — автодополнение для всех полей
• Легко рефакторить — при изменении интерфейса все ошибки встанут на места

✅ Итоги урока

• TypeScript — это JavaScript со строгой системой типов
• TypeScript компилируется в обычный JavaScript перед запуском
• Аннотации типов (: number, : string) защищают от ошибок
• TypeScript ловит ошибки на этапе компиляции, до запуска программы
• Интерфейсы и типы делают код самодокументированным
• TypeScript поддерживает автодополнение в редакторе кода
• TypeScript не заменяет JavaScript, а дополняет его
• TypeScript стал стандартом в современной веб-разработке
• Даже базовые знания TypeScript сразу делают код надёжнее
• TypeScript помогает как в 개인ных, так и в командных проектах

Готовы? Переходите к следующему уроку: Установка Node.js, npm и TypeScript →