TypeScript Playground

Знакомимся с онлайн-средой TypeScript Playground — бесплатным инструментом для экспериментов с TypeScript прямо в браузере.

🌐 Что такое TypeScript Playground

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

Это идеальный инструмент для начинающих. Почему? Потому что он убирает все барьеры на входе: вам не нужно устанавливать Node.js, не нужно настраивать npm, не нужно разбираться с конфигурацией проекта. Вы просто открываете ссылку — и начинаете писать код. Мгновенно. Без ожидания.

Playground работает по принципу «написал — увидел результат». Слева вы пишете TypeScript-код, а справа мгновенно видите, как этот код компилируется в JavaScript. Это не просто редактор — это живое зеркало, показывающее, как TypeScript трансформирует ваш код на каждом этапе.

Playground szczególnie полезен на ранних этапах обучения, когда вы только знакомитесь с TypeScript. Вместо того чтобы тратить время на настройку окружения, вы сосредотачиваетесь на самом языке. Как только вы поймёте основы, вы сможете перейти к полноценной среде разработки.

История и контекст

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

Сообщество TypeScript активно использует Playground для создания «репродакшн-кейсов» — воспроизводимых примеров, которые помогают разработчикам делиться идеями и решать проблемы. Если вы когда-нибудь увидите ссылку на Playground в обсуждении на GitHub или Stack Overflow — это именно тот инструмент, о котором идёт речь.

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

🔗 Как открыть Playground

Открыть Playground проще простого. Введите в адресную строку браузера следующий адрес:

Это основной URL для доступа к Playground. Но есть несколько альтернативных способов открыть его:

Способы доступа

Что происходит при открытии

Когда вы открываете Playground, в браузере загружается полноценная среда разработки. Это не просто текстовый редактор — это сложное веб-приложение, которое включает компилятор TypeScript, редактор кода на базе Monaco (тот же, что используется в VS Code), панель вывода и множество настроек.

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

Системные требования

Playground поддерживает все современные браузеры: Chrome, Firefox, Safari, Edge. Он не требует какого-либо особого аппаратного обеспечения — достаточно обычного компьютера или ноутбука. Интерфейс адаптивен и хорошо работает на экранах разных размеров.

Для оптимальной работы рекомендуется использовать актуальную версию браузера. Старые версии могут работать некорректно из-за использования современных JavaScript-фич в интерфейсе Playground. Если вы заметили странности — обновите браузер до последней версии.

🖥️ Интерфейс Playground

Давайте подробно разберём, что находится в интерфейсе Playground и за что отвечает каждый элемент. Понимание интерфейса — ключ к эффективной работе с инструментом.

Левая панель — Редактор кода

Левая часть экрана — это редактор кода, где вы пишете свой TypeScript. Это полноценный редактор на базе Monaco Editor, который используется в Visual Studio Code. Он поддерживает все привычные функции:

• Подсветка синтаксиса — код окрашивается по цветам в зависимости от типа конструкции. Ключевые слова, строки, числа, комментарии — всё визуально разделено
• Автодополнение — при наборе кода появляются подсказки с доступными переменными, функциями, типами и методами
• Подсветка ошибок — ошибки типизации подчёркиваются красным, предупреждения — жёлтым
• Переход к определению — можно кликнуть на переменную или функцию и перейти к её объявлению
• Поиск и замена — стандартные сочетания клавиш Ctrl+F (поиск) и Ctrl+H (замена)
• Форматирование — автоматическое выравнивание кода при вводе
• Мультикурсор — возможность редактировать несколько мест одновременно
• Сворачивание блоков — можно свернуть функции, классы, условия для удобства навигации

Редактор поддерживает стандартные сочетания клавиш: Ctrl+Z для отмены, Ctrl+Shift+Z для повтора, Ctrl+D для выбора следующего вхождения слова, и так далее. Если вы привыкли к VS Code, вам будет очень комфортно — интерфейс практически идентичен.

Правая панель — Вывод

Правая часть экрана показывает результат компиляции TypeScript-кода в JavaScript. Это не просто «выходные данные программы» — это именно скомпилированный JavaScript-код, который можно использовать в реальных проектах.

По умолчанию правая панель отображает JavaScript-эквивалент вашего TypeScript-кода. Вы можете видеть, как TypeScript удаляет типы, как трансформируются интерфейсы, как изменяются функции. Это бесценный инструмент для понимания того, как TypeScript работает «под капотом».

В дополнение к JavaScript-коду правая панель может показывать:

• DTS-файл — файл объявлений типов (.d.ts), который используется другими проектами для получения информации о типах
• Сводку — информацию о размере скомпилированного кода и использованных фичах
• Список ошибок — подробную информацию обо всех ошибках компиляции

Панель инструментов (Toolbar)

В верхней части Playground расположена панель инструментов с несколькими важными элементами:

Область вывода (Console)

Внизу Playground есть область консоли, где отображается результат выполнения вашего кода. Когда вы пишете console.log() в TypeScript-коде и нажимаете кнопку «RUN», результат выводится именно здесь. Это область, где вы видите «живой» результат работы вашей программы.

Консоль поддерживает различные типы вывода: простые строки, объекты, массивы, ошибки. Ошибки отображаются красным цветом с указанием строки, где произошла проблема. Это удобно для отладки — вы сразу видите, что пошло не так и где искать проблему.

✍️ Пишем код в Playground: пошагово

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

Шаг 1: Открываем Playground

Перейдите по ссылке typescriptlang.org/play. Дождитесь загрузки страницы — это займёт несколько секунд. Вы увидите интерфейс с двумя панелями: левая для кода, правая для вывода.

Шаг 2: Удаляем дефолтный код

По умолчанию Playground содержит пример кода. Выделите весь код (Ctrl+A) и удалите его (Delete). Теперь у вас чистый редактор.

Шаг 3: Пишем первую строку

Напишите простую строку TypeScript:

const greeting: string = "Привет, TypeScript!";

Сразу после ввода обратите внимание на правую панель — она обновилась автоматически. Вы увидите, что TypeScript преобразовал ваш код в JavaScript:

const greeting = "Привет, TypeScript!";

Видите? Тип : string исчез — TypeScript удалил его при компиляции. Это и есть суть работы TypeScript: вы добавляете типы для проверки, а потом они удаляются, оставляя чистый JavaScript.

Шаг 4: Добавляем функцию

Добавьте функцию для приветствия:

function greet(name: string): string {
  return `Привет, ${name}!`;
}

const message: string = greet("Алексей");
console.log(message);

Обратите внимание на несколько вещей:

• Параметр name имеет тип string — это значит, что функция принимает только строки
• Возвращаемый тип тоже string — функция гарантированно вернёт строку
• Шаблонная строка использует синтаксис ${...} для интерполяции
• console.log() выведет результат в консоль Playground

Шаг 5: Запускаем код

Нажмите кнопку «RUN» в верхней панели. В области консоли внизу появится результат: «Привет, Алексей!». Поздравляю — вы только что написали и запустили свою первую программу на TypeScript!

Шаг 6: Экспериментируем с ошибками

Попробуйте передать число вместо строки:

const result = greet(42);

Сразу же в редакторе появится красная подсветка ошибки. TypeScript скажет: «Тип number не может быть назначен параметру типа string». Это и есть магия типизации — ошибка поймана ещё до запуска кода!

Шаг 7: Исправляем ошибку

Верните строковый аргумент или измените сигнатуру функции, чтобы она принимала числа тоже. Например:

function greet(name: string | number): string {
  return `Привет, ${name}!`;
}

const result = greet(42);
console.log(result);

Теперь функция принимает и строки, и числа (это называется Union-тип). Ошибка исчезла, и код компилируется успешно.

Шаг 8: Смотрим на результат компиляции

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

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

🔍 Разбираем вывод: что показывает правая панель

Правая панель Playground — это не просто «выходные данные». Это окно в мир компиляции, показывающее, как TypeScript трансформирует ваш код. Давайте научимся читать и понимать вывод.

JavaScript-вывод

Основной вывод — это скомпилированный JavaScript-код. Рассмотрим пример:

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

function createUser(name: string, age: number): User {
  return { name, age };
}

const user = createUser("Анна", 25);

function createUser(name, age) {
  return { name, age };
}

const user = createUser("Анна", 25);

Обратите внимание на ключевые изменения:

• Интерфейс User исчез — это чисто TypeScript-конструкция, она не нужна в JavaScript
• Типы параметров удалены — name: string стал просто name
• Возвращаемый тип удалён — : User исчез из сигнатуры функции
• Сам код остался рабочим — логика функции не изменилась

DTS-вывод (declarations)

Playground также может показать .d.ts файл — это файл объявлений типов. Он содержит только интерфейсы и сигнатуры функций, без реализации. Это файл, который используется другими TypeScript-проектами для «понимания» типов вашего модуля:

interface User {
    name: string;
    age: number;
}
declare function createUser(name: string, age: number): User;

DTS-файл важен при создании библиотек и модулей. Он позволяет другим разработчикам использовать ваш код с полной поддержкой типов, даже если они не видят исходников.

Читаем ошибки компиляции

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

function add(a: number, b: number): number {
  return a + b;
}

const result: string = add(1, 2);

Ошибка будет примерно такой:

Структура ошибки:

• Код ошибки (TS2322) — уникальный идентификатор, по которому можно найти документацию
• Описание — что именно не так (тип number не совместим с типом string)
• Локация — где именно в коде проблема (номер строки, подчёркивание)
• Совет — иногда TypeScript предлагает, как исправить ошибку

Сводка по целевому стандарту

Playground также показывает информацию о том, какой стандарт JavaScript используется для компиляции. По умолчанию это ES5 (самый совместимый), но можно изменить на ES2015, ES2017, ES2020 или даже ESNext. Это влияет на то, какой JavaScript-код будет сгенерирован:

// С ES2015+ (const, let, стрелочные функции)
const greet = (name: string) => `Привет, ${name}!`;

// С ES5 (var, function expressions)
var greet = function (name) {
  return "Привет, " + name + "!";
};

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

⚙️ Настройки Playground

Одна из сильных сторон Playground — богатые возможности настройки. Давайте разберём каждую группу настроек подробно.

Выбор версии TypeScript

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

Зачем менять версию? Иногда вам нужно проверить, как код компилируется на конкретной версии TypeScript. Например, если вы работаете с проектом, который использует TypeScript 4.9, а Playground по умолчанию использует 5.x, поведение может отличаться. Переключение версии позволяет убедиться, что код работает корректно на нужной версии.

Настройки компилятора (tsconfig)

Нажмите на иконку шестерёнки — откроется панель настроек компилятора. Это аналог файла tsconfig.json, который используется в реальных проектах. Вот основные настройки:

Настройки редактора

Playground позволяет настроить внешний вид редактора:

• Тема — светлая или тёмная (по умолчанию определяется системными настройками)
• Размер шрифта — можно увеличить или уменьшить для удобства чтения
• Отступы — 2 или 4 пробела (стандарт для TypeScript — 2)
• Перенос строк — включить или выключить перенос длинных строк
• Курсор — форма и цвет курсора
• Подсветка скобок — подсвечивать парные скобки при наведении

Пресеты настроек

Playground предлагает готовые пресеты настроек для разных сценариев:

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

Понимание флага strict

Одна из самых важных настроек — флаг strict. Когда он включён (что рекомендуется), TypeScript активирует целый набор проверок:

• strictNullChecks — null и undefined не являются подтипами других типов. Это значит, что вы не сможете случайно передать null туда, где ожидается строка
• noImplicitAny — запрещает неявное использование типа any. Если TypeScript не может вывести тип, он потребует явного указания
• strictFunctionTypes — строгая проверка типов функций (контравариантность параметров)
• strictBindCallApply — строгая проверка типов для методов bind, call, apply
• noImplicitThis — требует явного указания типа this в функциях
• alwaysStrict — добавляет "use strict" в каждый JavaScript-файл
• useUnknownInCatchVariables — тип переменной в catch будет unknown вместо any

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

💻 Практические примеры в Playground

Теперь давайте разберём серию практических примеров, которые вы можете воспроизвести в Playground. Каждый пример демонстрирует конкретную возможность TypeScript и помогает закрепить теорию на практике.

Пример 1: Базовые типы

Начнём с самых простых типов — примитивов. Скопируйте этот код в Playground и запустите:

// Примитивные типы TypeScript
constвозраст: number = 25;
const имя: string = "Алексей";
const isActive: boolean = true;
const nothing: null = null;
const notDefined: undefined = undefined;

// Вывод всех значений
console.log("Имя:", имя);
console.log("Возраст:",возраст);
console.log("Активен:", isActive);
console.log("Null:", nothing);
console.log("Undefined:", notDefined);

// TypeScript автоматически выводит типы
letгорода = "Москва"; // тип string (выведен автоматически)
letтемпература = 23.5;        // тип number
let естьДом = false;    // тип boolean

console.log("Город:", город);
console.log("Температура:", температура);
console.log("Есть дом:", естьДом);

Обратите внимание на несколько моментов:

• Каждая переменная имеет явно указанный тип
• TypeScript проверяет совместимость типов при присваивании
• TypeScript может выводить типы автоматически (как в примере с город)
• Выражения null и undefined — это отдельные типы

Пример 2: Функции

Функции — основа любого языка. В TypeScript вы можете типизировать параметры и возвращаемые значения:

// Функция с типизированными параметрами и возвращаемым значением
function calculateArea(width: number, height: number): number {
  return width * height;
}

// Стрелочная функция
const multiply = (a: number, b: number): number => a * b;

// Функция с необязательным параметром
function greetUser(name: string, title?: string): string {
  if (title) {
    return `Здравствуйте, ${title} ${name}!`;
  }
  return `Привет, ${name}!`;
}

// Функция с параметрами по умолчанию
function createUser(name: string, role: string = "user"): object {
  return { name, role };
}

// Использование
const area = calculateArea(10, 5);
console.log("Площадь:", area);

const product = multiply(4, 7);
console.log("Произведение:", product);

console.log(greetUser("Анна"));
console.log(greetUser("Петр", "Доктор"));
console.log(greetUser("Мария", "Профессор"));

const user1 = createUser("Иван");
const user2 = createUser("Елена", "admin");
console.log("Пользователь 1:", user1);
console.log("Пользователь 2:", user2);

В этом примере мы видим:

• Обычные функции — с явно указанными типами параметров и возвращаемого значения
• Стрелочные функции — компактный синтаксис, типы указываются так же
• Необязательные параметры — обозначаются вопросительным знаком ?
• Параметры по умолчанию — значение по умолчанию указывается через =

Пример 3: Массивы и кортежи

TypeScript позволяет типизировать массивы и кортежи (фиксированные по длине массивы):

// Массивы строк
const fruits: string[] = ["яблоко", "банан", "апельсин"];
// Альтернативный синтаксис
const vegetables: Array<string> = ["морковь", "огурец", "помидор"];

// Массив чисел
const numbers: number[] = [1, 2, 3, 4, 5];

// Смешанный массив (объединение типов)
const mixed: (string | number)[] = [1, "два", 3, "четыре"];

// Кортеж — массив фиксированной длины с определёнными типами
const user: [string, number, boolean] = ["Иван", 25, true];
const coordinate: [number, number] = [51.5074, -0.1278];

// Работа с массивами
console.log("Фрукты:", fruits);
console.log("Первый фрукт:", fruits[0]);
console.log("Количество фруктов:", fruits.length);

// Методы массивов
const upperFruits = fruits.map(f => f.toUpperCase());
console.log("Заглавные:", upperFruits);

const longNames = fruits.filter(f => f.length > 5);
console.log("Длинные названия:", longNames);

const totalLength = fruits.reduce((sum, f) => sum + f.length, 0);
console.log("Общая длина названий:", totalLength);

// Кортеж
console.log("Пользователь:", user);
console.log("Имя:", user[0]);
console.log("Возраст:", user[1]);

Здесь мы видим разницу между обычными массивами и кортежами. Обычный массив может содержать элементы любого типа (в пределах указанного типа), а кортеж — строго определённые типы на строго определённых позициях.

Пример 4: Интерфейсы

Интерфейсы позволяют описывать структуру объектов:

// Интерфейс пользователя
interface User {
  id: number;
  name: string;
  email: string;
  age?: number; // Необязательное свойство
  readonly createdAt: Date; // Только для чтения
}

// Интерфейс функции
interface SearchFunction {
  (source: string, query: string): boolean;
}

// Создание объекта, соответствующего интерфейсу
const user: User = {
  id: 1,
  name: "Алексей",
  email: "alex@example.com",
  createdAt: new Date()
};

// Интерфейс с необязательным свойством
const userWithAge: User = {
  id: 2,
  name: "Мария",
  email: "maria@example.com",
  age: 30,
  createdAt: new Date()
};

// Функция поиска
const contains: SearchFunction = (source, query) => {
  return source.toLowerCase().includes(query.toLowerCase());
};

console.log("Пользователь:", user);
console.log("Пользователь с возрастом:", userWithAge);
console.log("Содержит 'script' в 'TypeScript':", contains("TypeScript", "script"));

Интерфейсы — это мощный инструмент для описания структуры данных. Они обеспечивают:

• Типобезопасность — нельзя добавить свойство, которого нет в интерфейсе
• Необязательные свойства — обозначаются ?
• readonly свойства — нельзя изменить после создания
• Читаемость — сразу видно, какую структуру имеет объект

Пример 5: Type Guards

Type Guards — это способ безопасно работать с Union-типами:

// Типы для фигур
interface Circle {
  kind: "circle";
  radius: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

interface Triangle {
  kind: "triangle";
  base: number;
  height: number;
}

type Shape = Circle | Rectangle | Triangle;

// Функция с Type Guard
function calculateArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "rectangle":
      return shape.width * shape.height;
    case "triangle":
      return (shape.base * shape.height) / 2;
  }
}

// Функция с пользовательским Type Guard
function isCircle(shape: Shape): shape is Circle {
  return shape.kind === "circle";
}

// Использование
const circle: Circle = { kind: "circle", radius: 5 };
const rectangle: Rectangle = { kind: "rectangle", width: 10, height: 6 };
const triangle: Triangle = { kind: "triangle", base: 8, height: 4 };

console.log("Площадь круга:", calculateArea(circle));
console.log("Площадь прямоугольника:", calculateArea(rectangle));
console.log("Площадь треугольника:", calculateArea(triangle));

// Проверка типа
if (isCircle(circle)) {
  console.log("Радиус круга:", circle.radius);
}

Type Guards позволяют TypeScript понять, какой конкретный тип используется в данный момент. Это crucial для работы с Union-типами, где переменная может быть одним из нескольких типов.

Пример 6: Generics

Generics позволяют создавать переиспользуемые компоненты с типизацией:

// Обобщённая функция
function identity<T>(arg: T): T {
  return arg;
}

// Обобщённый интерфейс
interface Box<T> {
  value: T;
  getValue(): T;
}

// Реализация обобщённого интерфейса
class StringBox implements Box<string> {
  constructor(public value: string) {}
  getValue(): string {
    return this.value;
  }
}

class NumberBox implements Box<number> {
  constructor(public value: number) {}
  getValue(): number {
    return this.value;
  }
}

// Ограничение типов
interface Lengthwise {
  length: number;
}

function logLength<T extends Lengthwise>(arg: T): T {
  console.log("Длина:", arg.length);
  return arg;
}

// Использование
const result1 = identity<string>("Hello");
const result2 = identity<number>(42);
const result3 = identity(true); // TypeScript выведет тип автоматически

console.log("Строка:", result1);
console.log("Число:", result2);
console.log("Булево:", result3);

const stringBox = new StringBox("Текст");
const numberBox = new NumberBox(123);

console.log("StringBox:", stringBox.getValue());
console.log("NumberBox:", numberBox.getValue());

logLength("Hello");
logLength([1, 2, 3]);
logLength({ length: 10 });

Generics — это одна из самых мощных возможностей TypeScript. Они позволяют создавать функции и классы, которые работают с любыми типами, сохраняя при этом типобезопасность. Вместо использования any (что лишает вас проверки типов), generics позволяют TypeScript вывести и проверить типы на этапе компиляции.

Пример 7: Enum и Type Aliases

Перечисления и псевдонимы типов расширяют возможности типизации:

// Перечисление (enum)
enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT"
}

enum HttpStatus {
  OK = 200,
  NotFound = 404,
  ServerError = 500
}

// Псевдоним типа (type alias)
type ID = string | number;
type Point = { x: number; y: number };
type Callback = (data: string) => void;

// Объединение типов (union)
type StringOrNumber = string | number;

// Пересечение типов (intersection)
type Timestamped = {
  createdAt: Date;
  updatedAt: Date;
};

type UserWithTimestamps = User & Timestamped;

// Использование
const moveUp = Direction.Up;
console.log("Направление:", moveUp);
console.log("Статус:", HttpStatus.NotFound);

const point: Point = { x: 10, y: 20 };
console.log("Точка:", point);

const id: ID = "abc123";
const numericId: ID = 42;
console.log("ID:", id, numericId);

Эти конструкции позволяют создавать более выразительный и безопасный код. Enum удобны для представления фиксированных наборов значений, type aliases — для создания новых имён для существующих типов, а union/intersection — для комбинации типов.

Пример 8: Классы

TypeScript поддерживает полноценное ООП с типизацией:

// Базовый класс
class Animal {
  constructor(
    public name: string,
    private age: number,
    protected species: string
  ) {}

  // Публичный метод
  getInfo(): string {
    return `${this.name}, ${this.species}, ${this.age} лет`;
  }

  // Приватный метод
  private calculateAge(): number {
    return this.age * 7; // Условное "собачьи годы"
  }

  // Геттер
  get ageInDogYears(): number {
    return this.calculateAge();
  }
}

// Наследование
class Dog extends Animal {
  constructor(
    name: string,
    age: number,
    public breed: string
  ) {
    super(name, age, "собака");
  }

  bark(): string {
    return `${this.name} говорит: Гав-гав!`;
  }

  // Переопределение метода
  getInfo(): string {
    return `${super.getInfo()}, порода: ${this.breed}`;
  }
}

// Абстрактный класс
abstract class Shape {
  abstract area(): number;
  abstract perimeter(): number;

  describe(): string {
    return `Площадь: ${this.area().toFixed(2)}, Периметр: ${this.perimeter().toFixed(2)}`;
  }
}

class CircleShape extends Shape {
  constructor(private radius: number) {
    super();
  }

  area(): number {
    return Math.PI * this.radius ** 2;
  }

  perimeter(): number {
    return 2 * Math.PI * this.radius;
  }
}

// Использование
const dog = new Dog("Шарик", 5, "дворняга");
console.log(dog.getInfo());
console.log(dog.bark());
console.log("В собачьи годы:", dog.ageInDogYears);

const circle = new CircleShape(10);
console.log(circle.describe());

Классы в TypeScript — это мощный инструмент для организации кода. Они поддерживают инкапсуляцию (приватные и защищённые члены), наследование (extends), полиморфизм (переопределение методов) и абстракцию (абстрактные классы).

Пример 9: Utility Types

TypeScript предоставляет встроенные утилитарные типы для трансформации типов:

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
  role: string;
}

// Partial — все свойства необязательны
type PartialUser = Partial<User>;

// Required — все свойства обязательны
type RequiredUser = Required<PartialUser>;

// Pick — выбирает только указанные свойства
type UserBasic = Pick<User, "id" | "name" | "email">;

// Omit — исключает указанные свойства
type UserWithoutRole = Omit<User, "role">;

// Record — создаёт объект с определёнными ключами и значениями
type UserRoles = Record<string, string[]>;

// Readonly — делает все свойства только для чтения
type ReadonlyUser = Readonly<User>;

// ReturnType — извлекает тип возвращаемого значения функции
function createUser() {
  return { id: 1, name: "Test", email: "test@test.com", age: 25, role: "user" };
}
type CreateUserResult = ReturnType<typeof createUser>;

// Parameters — извлекает типы параметров функции
function processUser(user: User, verbose: boolean): void {}
type ProcessUserParams = Parameters<typeof processUser>;

// Использование
const partialUser: PartialUser = { name: "Тест" }; // Остальные свойства необязательны
const userBasic: UserBasic = { id: 1, name: "Анна", email: "anna@test.com" };
const userNoRole: UserWithoutRole = { id: 2, name: "Борис", email: "boris@test.com", age: 30 };

console.log("Частичный пользователь:", partialUser);
console.log("Базовый пользователь:", userBasic);
console.log("Пользователь без роли:", userNoRole);

Utility types — это набор встроенных типов для трансформации существующих типов. Они позволяют создавать вариации интерфейсов без дублирования кода. Это essential инструмент для работы с типами в реальных проектах.

🎯 Когда использовать Playground

TypeScript Playground — это не просто «песочница для новичков». Это универсальный инструмент, который полезен в самых разных сценариях. Давайте разберём основные случаи использования.

1. Быстрое прототипирование

Когда вам приходит идея и вы хотите быстро проверить, как она будет работать на TypeScript — Playground идеален. Не нужно создавать проект, настраивать webpack, писать конфигурацию. Просто откройте Playground и начните писать. Если идея сработает — перенесите код в проект. Если нет — просто закройте вкладку.

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

2. Изучение новых возможностей TypeScript

TypeScript постоянно развивается — каждые несколько месяцев появляются новые фичи. Playground позволяет мгновенно попробовать нововведения, не обновляя локальное окружение. Просто переключите версию TypeScript в Playground на Dev или Nightly — и у вас есть доступ к экспериментальным возможностям.

3. Создание воспроизводимых примеров

Когда вы сталкиваетесь с ошибкой и хотите показать её коллеге или задать вопрос на форуме — Playground незаменим. Напишите минимальный пример, демонстрирующий проблему, нажмите «Share» и отправьте ссылку. Получатель сразу увидит ваш код и сможет его запустить. Это гораздо эффективнее, чем кусок кода без контекста.

4. Демонстрация и обучение

Если вы преподаватель или ментор, Playground — идеальный инструмент для демонстрации. Вы можете показать студентам, как работает типизация в реальном времени. Изменяйте код, показывайте ошибки, объясняйте, как TypeScript реагирует на разные ситуации. Студенты могут повторять за вами в своих вкладках.

5. Отладка сложных типов

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

6. Проверка совместимости

Если вы поддерживаете библиотеку и хотите убедиться, что код работает на разных версиях TypeScript — Playground позволяет быстро переключаться между версиями и проверять совместимость.

7. Начальное знакомство с языком

Для начинающих Playground — первая точка контакта с TypeScript. Здесь можно безопасно экспериментировать, не боясь «сломать» что-то. Без установки, без конфигурации, без сложностей — просто откройте и начните писать.

⚖️ Playground vs Локальная среда: сравнение

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

Когда Playground лучше

• Вы только учитесь TypeScript и хотите быстро попробовать
• Вам нужно проверить одну конкретную идею или фичу
• Вы хотите поделиться кодом с кем-то по ссылке
• Вам нужно создать воспроизводимый пример для вопроса
• Вы хотите поэкспериментировать с новой версией TypeScript
• У вас нет возможности установить Node.js (например, на чужом компьютере)

Когда локальная среда лучше

• Вы работаете над реальным проектом
• Вам нужны зависимости (React, Express, и т.д.)
• Проект состоит из нескольких файлов и модулей
• Вам нужна интеграция с Git
• Вы хотите использовать расширения (ESLint, Prettier)
• Вам нужна полноценная отладка
• Вы работаете в команде
• Проект должен быть задеплоен

Гибридный подход

На практике многие разработчики используют оба инструмента одновременно. Вот типичный workflow:

1. Идея пришла — открываете Playground, пишете быстрый прототип
2. Прототип работает — копируете код в локальный проект
3. Интеграция — добавляете зависимости, настраиваете сборку
4. Тестирование — пишете тесты, проверяете edge cases
5. Отладка — используете отладчик VS Code для поиска багов
6. Деплой — публикуете готовый проект

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

📋 Итоги урока

Готовы к следующему шагу?

Теперь, когда вы знакомы с TypeScript Playground и основами языка, давайте перейдём к изучению примитивных типов данных.