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 검사를 위해 설계되었습니다. union 좁히기 검증, 제네릭 헬퍼 타입 테스트, 컴파일러 타겟 비교, strict 모드 동작 확인, TypeScript 가 출력하는 JavaScript 검토에 사용됩니다. 학습, 작은 예제 디버깅, 답변 준비, 프로젝트로 옮기기 전 작은 리팩터링 확인에 유용합니다.
브라우저 컴파일러는 배열, 문자열, 레코드, JSON, console, 타이머와 같은 일반적인 JavaScript 객체에 대해 간결한 내장 선언 파일을 사용합니다. 덕분에 playground 는 스니펫에 대해 빠르고 자체 완결적으로 유지됩니다. 코드가 React, Node.js, DOM API 또는 패키지 특정 선언에 의존하는 경우, 실제 tsconfig.json 및 설치된 타입 패키지를 사용하여 프로젝트 내에서 최종 결과를 확인하세요.
큰 코드베이스에서 타입 오류를 분리하거나, strict 모드가 진단을 어떻게 변경하는지 비교하거나, 동료에게 TypeScript 개념을 설명하거나, 작은 스니펫이 JavaScript 로 어떻게 컴파일되는지 확인하려는 경우 이 playground 를 사용하세요. 내장된 예제는 구별된 유니온, 제네릭 레코드 헬퍼, satisfies 연산자 및 의도적인 타입 실수를 다루므로 깔끔한 컴파일러 상태와 실패한 컴파일러 상태를 모두 확인할 수 있습니다.
예. 브라우저 내 TypeScript 프로그램을 빌드하고 타입 오류, 구문 오류 및 컴파일러 옵션 메시지를 포함한 컴파일러의 진단을 보고합니다.
예. 주요 컨트롤은 JavaScript 타겟, 모듈 출력, strict 모드, 선언 파일 출력 및 noUncheckedIndexedAccess 를 다룹니다.
이 playground 는 의도적으로 간결한 내장 타입 라이브러리를 사용합니다. 프레임워크, DOM, Node.js 또는 npm 패키지 타입의 경우 로컬 프로젝트 설정을 사용하세요.
실행기는 빠른 스니펫을 위해 샌드박스화된 iframe 을 사용합니다. 신뢰할 수 없는 코드 실행은 피하고, 실제 앱 코드는 일반적인 개발 환경 내에서 테스트하세요.
이 콘텐츠, 페이지 또는 도구를 다음과 같이 인용하세요:
"TypeScript 플레이그라운드" - https://MiniWebtool.com/ko/typescript-플레이그라운드/에서 MiniWebtool 인용, https://MiniWebtool.com/
by miniwebtool team. Updated: 2026-05-23
MiniWebtool
TypeScript 플레이그라운드이(가) 마음에 들면 다음 코드를 복사하여 붙여넣어 이 도구를 연결해 보세요.