Начать создавать

Playcode Classic

TypeScript Playground

Этот TypeScript Playground запускает TypeScript онлайн, на живой странице прямо в браузере. Ошибки типов подчёркиваются по ходу ввода, npm-пакеты ставятся вместе с типами, а компоненты React .tsx рендерятся в превью. Ничего не нужно настраивать, начать можно без аккаунта; войдите, чтобы сохранить проект и поделиться им. Песочница входит в Playcode Classic – набор бесплатных инструментов Playcode для кода.

Открыть песочницу

Бесплатно. Начать можно без аккаунта.

В песочнице на детской площадке Play пытается протолкнуть большой квадратный брусок в круглое отверстие огромного деревянного сортера; брусок не проходит, а под отверстием светится красная волнистая линия. Разработчик на краю песочницы смеётся над ноутбуком.

Ошибки типов видны, пока вы пишете

Редактор проверяет типы с помощью TypeScript 5.9 и подчёркивает ошибки; наведите курсор, чтобы увидеть причину. Проверка никогда не мешает запуску, так что идею можно попробовать, даже если типы ещё не дописаны.

Хотите описать сайт словами, а не кодом? Воспользуйтесь конструктором сайтов с ИИ от Playcode
На песке, как строка кода, лежит ряд деревянных кубиков, среди которых один треугольник; Play с красным мелком в руке провёл под треугольником волнистую линию, а разработчик показывает на неё с края песочницы.

Пакеты приходят со своими типами

Импортируйте пакет, и редактор предложит установить его из npm. Определения типов устанавливаются вместе с ним, поэтому автодополнение знает каждую функцию, а проверка – каждый аргумент.

За столиком для пикника разработчик вкладывает новый инструмент в открытый кейс – в единственную поролоновую ячейку, которая подходит ему точь-в-точь, а Play на столе рядом восторженно складывает ладони.

Есть файл .tsx? Отрендерите его.

Откройте шаблон React TypeScript, вставьте компонент в файл и отрендерите его из index.tsx. Он появится в превью, и его кнопки будут работать.

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

Официальный TypeScript Playground или наш?

Официальный TypeScript Playground подойдёт, чтобы посмотреть скомпилированный JavaScript и попробовать другие версии и настройки компилятора.

Наш – когда вашему TypeScript нужны страница, пакеты или React:

  • Живая страница с HTML и CSS
  • npm-пакеты вместе с типами
  • React и .tsx
  • Несколько файлов, которые импортируют друг друга
  • Ссылка, чтобы поделиться, и совместная работа над кодом
  • Чат с ИИ для вопросов о вашем коде

Входит в Playcode Classic

Playcode начинался в 2016 году как среда для программирования в браузере. Эта песочница – один из его бесплатных инструментов для кода, которые мы теперь называем Playcode Classic.

Сегодня Playcode – это платформа с ИИ для создания и запуска сайтов и приложений.

Подробнее о конструкторе сайтов с ИИВсе инструменты Playcode Classic
Play стоит у открытых ворот старой детской площадки и показывает, что за ними: ракету, готовую к старту.

Частые вопросы

  • Что такое TypeScript Playground?

    Это песочница TypeScript, или TS playground: место, где можно писать на TypeScript и сразу запускать код, не настраивая ни проект, ни компилятор. Наш запускает код на живой странице в браузере и проверяет типы по ходу ввода.

  • Этот онлайн-редактор TypeScript бесплатный?

    Да. Писать и запускать код можно бесплатно и без аккаунта. Чтобы сохранять проекты и делиться ими, нужен бесплатный аккаунт – в нём можно сохранить до трёх проектов, публичных или приватных; чат с ИИ расходует кредиты.

  • Какая версия TypeScript здесь используется?

    Редактор проверяет код с помощью TypeScript 5.9. Для запуска esbuild компилирует его в JavaScript без проверки типов, поэтому ошибка типов никогда не мешает запуску.

  • Проверяются ли типы, как в tsc?

    Да. По ходу ввода работает собственная проверка типов TypeScript и подчёркивает ошибки; режим strict включён, а strictNullChecks выключен.

  • Можно ли посмотреть скомпилированный JavaScript?

    Пока нет. Чтобы посмотреть JavaScript, который генерирует TypeScript, воспользуйтесь официальным TypeScript Playground.

  • Можно ли использовать npm-пакеты?

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

  • Как открыть файл .tsx онлайн?

    Откройте шаблон React TypeScript, вставьте компонент в файл и отрендерите его из index.tsx. Он появится в превью, так что песочница заодно работает как онлайн-просмотрщик TSX.

  • Можно ли открыть файл .tsx на телефоне?

    Да, в браузере телефона, точно так же. Длинный код удобнее читать на большом экране.

  • Поддерживаются ли React и JSX?

    Да. Файлы .tsx и .jsx компилируются в превью. Начните с шаблона React TypeScript.

  • Эта песочница – часть Playcode?

    Да. Эта песочница входит в Playcode Classic – набор бесплатных инструментов Playcode для кода. Playcode начинался в 2016 году как среда для программирования в браузере. Сегодня это платформа с ИИ для создания и запуска сайтов и приложений.

Другие бесплатные инструменты для кода

Напишите тип. Запустите код.

Открыть песочницу
Ракета ждёт с открытой дверью и свободным местом, и Play приглашает вас внутрь. Высоко в небе удаляется другая ракета.