Песочница TypeScript
Пишите, компилируйте, проверяйте типы и запускайте TypeScript в браузере с живой диагностикой, выводом JavaScript, управлением строгим режимом (strict mode), быстрыми примерами и изолированной консолью.
Пишите, компилируйте, проверяйте типы и запускайте TypeScript в браузере с живой диагностикой, выводом JavaScript, управлением строгим режимом (strict mode), быстрыми примерами и изолированной консолью.
'; updateStage('run', false); runnerEl.srcdoc = sandboxHtml; } function downloadJavaScript() { const blob = new Blob([jsOutputEl.value], { type: 'text/javascript;charset=utf-8' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'playground.js'; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); } function tidyIndents() { const tidied = sourceEl.value .replace(/\t/g, ' ') .split('\n') .map(function (line) { return line.replace(/\s+$/g, ''); }) .join('\n') .replace(/\n{4,}/g, '\n\n\n'); sourceEl.value = tidied; compileNow(); } function resetSource() { sourceEl.value = document.getElementById('tsplay-source').defaultValue; compileNow(); } sourceEl.addEventListener('input', scheduleCompile); sourceEl.addEventListener('scroll', function () { linesEl.scrollTop = sourceEl.scrollTop; }); sourceEl.addEventListener('keydown', function (event) { if (event.key === 'Tab') { event.preventDefault(); const start = sourceEl.selectionStart; const end = sourceEl.selectionEnd; sourceEl.value = sourceEl.value.slice(0, start) + ' ' + sourceEl.value.slice(end); sourceEl.selectionStart = sourceEl.selectionEnd = start + 2; scheduleCompile(); } }); document.querySelectorAll('[data-example]').forEach(function (button) { button.addEventListener('click', function () { const name = button.getAttribute('data-example'); if (EXAMPLES[name]) { sourceEl.value = EXAMPLES[name]; compileNow(); } }); }); document.querySelectorAll('.tsplay-result .tsplay-tab').forEach(function (tab) { tab.addEventListener('click', function () { setActiveTab(tab.getAttribute('data-tab')); }); }); [targetEl, moduleEl, strictEl, indexedEl, declarationsEl].forEach(function (control) { control.addEventListener('change', compileNow); }); compileBtn.addEventListener('click', compileNow); runBtn.addEventListener('click', runJavaScript); document.getElementById('tsplay-copy-source').addEventListener('click', function () { copyText(sourceEl.value, 'TypeScript'); }); document.getElementById('tsplay-copy-js').addEventListener('click', function () { copyText(jsOutputEl.value, 'JavaScript'); }); document.getElementById('tsplay-download-js').addEventListener('click', downloadJavaScript); document.getElementById('tsplay-format-btn').addEventListener('click', tidyIndents); document.getElementById('tsplay-clear-console').addEventListener('click', function () { consoleEl.textContent = 'Запустите скомпилированный JavaScript, чтобы увидеть здесь вывод консоли.'; }); document.getElementById('tsplay-clear-btn').addEventListener('click', resetSource); window.addEventListener('message', function (event) { if (!event.data || event.data.tsplayToken !== runnerToken) { return; } addConsoleLine(event.data.kind, event.data.value); }); function waitForCompiler(attempt) { syncEditorStats(); if (window.ts) { compilerStateEl.textContent = 'TypeScript ' + window.ts.version + ' готов'; setStatus('ready', 'Компилятор готов'); compileNow(); return; } if (attempt > 80) { compilerStateEl.textContent = 'Компилятор недоступен'; setStatus('error', 'Компилятор недоступен'); diagnosticsEl.innerHTML = '
'; return; } setTimeout(function () { waitForCompiler(attempt + 1); }, 150); } waitForCompiler(0); })();
Ваш блокировщик рекламы мешает нам показывать объявления
MiniWebtool остается бесплатным благодаря рекламе. Если этот инструмент помог вам, поддержите нас: перейдите на тариф без рекламы и с большим числом ежедневных запусков или разрешите MiniWebtool.com и обновите страницу.
Эта песочница TypeScript Playground позволяет быстро протестировать фрагмент кода, не открывая полноценный проект. Она запускает компилятор TypeScript в вашем браузере, показывает диагностику проверки типов с номерами строк, генерирует JavaScript и может запускать простой вывод в изолированной консоли.
Инструмент предназначен для повседневных проверок TypeScript: валидации сужения объединений, тестирования универсальных вспомогательных типов, сравнения целей компилятора, подтверждения поведения строгого режима и просмотра JavaScript, который генерирует TypeScript. Он полезен для обучения, отладки компактного примера, подготовки ответа или проверки небольшого рефакторинга перед его переносом в проект.
Компилятор в браузере использует компактный встроенный файл объявлений для распространённых объектов JavaScript, таких как массивы, строки, записи, JSON, console и таймеры. Это делает Playground быстрым и самодостаточным для фрагментов кода. Если ваш код зависит от React, Node.js, DOM APIs или объявлений, специфичных для пакетов, подтвердите окончательный результат внутри вашего проекта с его реальным tsconfig.json и установленными пакетами типов.
Используйте Playground, когда хотите изолировать ошибку типа из большой кодовой базы, сравнить, как строгий режим меняет диагностику, объяснить концепцию TypeScript коллеге или проверить, как небольшой фрагмент компилируется в JavaScript. Встроенные примеры охватывают размеченные объединения, универсальные помощники для записей, оператор satisfies и намеренные ошибки типов, чтобы вы могли увидеть как корректные, так и неудачные состояния компилятора.
Да. Он создаёт программу TypeScript в браузере и сообщает о диагностике от компилятора, включая ошибки типов, синтаксические ошибки и сообщения о параметрах компилятора.
Да. Основные элементы управления охватывают цель JavaScript, вывод модуля, строгий режим, генерацию объявлений и noUncheckedIndexedAccess.
Этот Playground намеренно использует компактную встроенную библиотеку типов. Для типов фреймворков, DOM, Node.js или пакетов npm используйте локальную настройку проекта.
Для быстрых фрагментов используется изолированный iframe. Избегайте запуска ненадёжного кода и тестируйте реальный код приложения в обычной среде разработки.
Ссылайтесь на этот контент, страницу или инструмент так:
"Песочница TypeScript" на сайте https://ru.miniWebtool.com/песочница-typescript/ от MiniWebtool, https://MiniWebtool.com/
by miniwebtool team. Updated: 2026-05-23
MiniWebtool
Если вам нравится Песочница TypeScript, подумайте о том, чтобы связать этот инструмент, скопировав/вставив следующий код: