TypeScript online: где запустить код без установки

Если хочется понять TypeScript, не обязательно сразу ставить Node.js, npm, VS Code, расширения и настраивать проект. Для первого контакта лучше открыть TypeScript online и проверить одну мысль: как типы помогают поймать ошибку до запуска

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

В этом уроке используем официальный TypeScript Playground, включим строгую проверку и разберем, где online compiler помогает, а где начинает мешать

Что получится в конце

Ты запустишь пример:

type Lesson = {
  title: string;
  minutes: number;
  finished: boolean;
};

const lesson: Lesson = {
  title: "TypeScript online",
  minutes: 20,
  finished: false,
};

function printLesson(item: Lesson): string {
  return `${item.title}: ${item.minutes} минут`;
}

console.log(printLesson(lesson));

Потом специально сломаешь тип:

minutes: "20",

И увидишь, что TypeScript подсвечивает проблему еще до запуска кода

Где открыть TypeScript online

Самый спокойный вариант — официальный TypeScript Playground:

https://www.typescriptlang.org/play/

Его плюс в том, что это не случайный сайт с кнопкой Run, а инструмент от команды TypeScript. В нем можно:

• писать TypeScript слева;
• видеть скомпилированный JavaScript справа;
• менять версию языка и настройки компилятора;
• включать strict;
• делиться примером ссылкой.

Для учебных статей и маленьких проверок это удобнее, чем полноценная IDE. Открыл, вставил код, увидел ошибку

Первый пример в Playground

Открой Playground и вставь:

type Lesson = {
  title: string;
  minutes: number;
  finished: boolean;
};

const lesson: Lesson = {
  title: "TypeScript online",
  minutes: 20,
  finished: false,
};

function printLesson(item: Lesson): string {
  return `${item.title}: ${item.minutes} минут`;
}

console.log(printLesson(lesson));

В правой части Playground можно увидеть JavaScript. В нем не будет type Lesson, потому что типы нужны компилятору, а не браузеру

Это полезно посмотреть глазами. TypeScript не добавляет в JavaScript новую сущность Lesson. Он проверяет, что объект подходит под форму Lesson, и затем убирает эту проверочную часть из итогового JavaScript

Включаем строгий режим

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

Если strict включен, TypeScript становится требовательнее. Это не значит, что код обязан стать сложнее. Чаще всего он становится честнее

Например, такой код выглядит безобидно:

function getDiscount(code?: string): number {
  return code.length > 0 ? 10 : 0;
}

Но code?: string означает, что code может быть undefined. Значит, code.length небезопасен. Правильнее:

function getDiscount(code?: string): number {
  return code && code.length > 0 ? 10 : 0;
}

Или чуть читаемее:

function getDiscount(code?: string): number {
  if (!code) {
    return 0;
  }

  return code.length > 0 ? 10 : 0;
}

Playground хорош именно для таких проверок: можно быстро увидеть, как меняется ошибка

Смотрим на JavaScript справа

Новички часто пропускают правую панель, а зря. Там видно, что TypeScript превращается в JavaScript

Код:

const minutes: number = 20;

После компиляции станет примерно:

var minutes = 20;

Тип number исчез. Значит, если ты хочешь проверить данные от пользователя во время выполнения, одного TypeScript мало. TypeScript защищает код на этапе разработки. Данные из формы, API или файла все равно нужно проверять в runtime

Это важное ограничение. TypeScript не гарантирует, что сервер всегда отдаст правильный JSON. Он помогает описать ожидание и поймать ошибки в своем коде

Что можно проверять online

Playground хорошо подходит для:

• первых типов: string, number, boolean;
• объектов через type или interface;
• union types;
• функций и возвращаемых значений;
• generics на маленьких примерах;
• проверки ошибок компилятора;
• сравнения TypeScript и JavaScript.

Например, можно быстро проверить union:

type Status = "draft" | "published" | "archived";

function publish(status: Status): string {
  return `Текущий статус: ${status}`;
}

console.log(publish("published"));
console.log(publish("deleted"));

Второй вызов должен подсветиться, потому что "deleted" не входит в список разрешенных значений

Где online compiler начинает мешать

Онлайн-среда не лучший вариант, если тебе нужно:

• работать с несколькими файлами проекта;
• подключать npm-пакеты;
• настраивать сборку через Vite, Next.js или Express;
• работать с файловой системой Node.js;
• запускать тесты;
• повторить реальную структуру проекта.

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

Например, если урок про TypeScript в Node.js и Express API, online compiler уже будет тесным. Там нужны package.json, зависимости, запуск сервера и проверка запроса. Это лучше делать локально

Как читать ошибки в Playground

Ошибка TypeScript обычно отвечает на три вопроса:

1. Что ожидалось.
2. Что пришло.
3. Где именно это произошло.

Возьми пример:

type Lesson = {
  title: string;
  minutes: number;
};

const lesson: Lesson = {
  title: "Playground",
  minutes: "20",
};

Смысл ошибки будет такой: поле minutes должно быть number, но получило string

Не надо сразу искать весь текст ошибки в поиске. Сначала посмотри на пару ожидалось -> пришло. Это быстрее, чем копировать сообщение целиком и попадать в чужую задачу

Мини-задание

Вставь в Playground:

type UserRole = "student" | "mentor" | "admin";

function canEdit(role: UserRole): boolean {
  return role === "mentor" || role === "admin";
}

console.log(canEdit("student"));
console.log(canEdit("owner"));

Задача:

• найти, почему "owner" подсвечивается;
• добавить роль "owner" в тип;
• снова проверить код;
• посмотреть JavaScript справа и убедиться, что тип UserRole исчез после компиляции.

Частые ошибки новичка

Первая ошибка — считать online compiler полноценной средой. Он удобен для примеров, но не показывает всю жизнь проекта

Вторая ошибка — отключать strict, потому что "слишком много красного". Если код учебный, лучше разобраться с одним предупреждением, чем привыкнуть выключать проверку

Третья ошибка — думать, что TypeScript проверит API во время выполнения. Если сервер прислал не то поле, TypeScript сам по себе это не поймает. Для runtime-проверок нужны отдельные проверки или библиотеки

Четвертая ошибка — копировать старые примеры, где все типизировано через any. Такой пример работает, но почти не учит TypeScript

Что может быть еще интересно по этой теме

Можно ли учить TypeScript только в браузере?

Первые темы — да. Но для Node.js, React, сборки и npm-пакетов нужна локальная среда

Какой online compiler выбрать?

Для TypeScript лучше начинать с официального Playground. Если нужно запускать полноценный проект, лучше переходить к локальной среде или песочницам уровня StackBlitz/CodeSandbox

Почему справа не видно типов?

Потому что TypeScript стирает типы при компиляции. JavaScript на выходе не хранит type, interface и аннотации параметров

Нужно ли ставить TypeScript после Playground?

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

Что почитать дальше по TypeScript

• TypeScript с нуля: первый файл, типы и компиляция — чтобы собрать локальный проект и запустить tsc.
• TypeScript и JavaScript: в чем разница простыми словами — чтобы не ждать от TypeScript невозможного.
• Union, literal types и enum в TypeScript — если понравилась идея разрешенных значений.
• tsconfig.json простыми словами: strict, target и module — когда захочется управлять настройками компиляции.