작업 흐름 간소화: miniwebtool 검색.
추가
관련 도구
CSS Flexbox 플레이그라운드JavaScript가 활성화되어 있습니까?SVG React JSX 변환기
홈페이지 > 웹 관리 도구 > TypeScript 플레이그라운드
 

TypeScript 플레이그라운드

브라우저에서 직접 TypeScript를 작성, 컴파일, 타입 검사 및 실행하세요. 실시간 진단 기능, JavaScript 출력, 엄격 모드(Strict Mode) 제어, 빠른 예제 및 샌드박스 콘솔을 제공합니다.

TypeScript 플레이그라운드
브라우저 컴파일러 콕핏
TypeScript 컴파일러 로드 중
빠른 예제:
TS playground.ts 컴파일러 대기 중
0줄
컴파일러 옵션
컴파일 파이프라인
TS
소스 (Source)
TypeScript 텍스트 파싱
타입 (Types)
계약 및 추론 검사
JS
출력 (Emit)
JavaScript 결과물 생성
실행 (Run)
샌드박스 콘솔 전용
ℹ 컴파일은 브라우저 내에서 안전하게 진행됩니다. 내장된 컴팩트 타입 라이브러리는 간단한 스니펫에 유용하며, 프로젝트별 패키지 타입은 로컬 TypeScript 설정을 사용해야 합니다.

Embed TypeScript 플레이그라운드 Widget

컴파일러 출력
TypeScript 대기 중
타입 상태
대기 중
진단
0
출력 크기
0 B
컴파일 시간
0 ms
컴파일러를 로드하는 중입니다. 첫 번째 컴파일 후 진단이 여기에 표시됩니다.
샌드박스 실행 출력
컴파일된 JavaScript 를 실행하면 콘솔 출력이 여기에 표시됩니다.
'; 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 = '
TypeScript 컴파일러를 로드할 수 없습니다
네트워크 연결 또는 콘텐츠 차단기를 확인한 후 페이지를 다시 로드하세요.
'; return; } setTimeout(function () { waitForCompiler(attempt + 1); }, 150); } waitForCompiler(0); })();
📲

MiniWebtool 앱 설치

홈 화면에 추가하여 즉시 접근 — 무료, 빠름, 다운로드 불필요.

           

더 빠르고 광고 없이 원하나요?

TypeScript 플레이그라운드 정보

이 TypeScript Playground 를 사용하면 전체 프로젝트를 열지 않고도 스니펫을 빠르게 테스트할 수 있습니다. 브라우저에서 TypeScript 컴파일러를 실행하고, 줄 번호와 함께 타입 검사 진단을 표시하며, JavaScript 를 출력하고, 간단한 출력을 샌드박스화된 콘솔에서 실행할 수 있습니다.

이 TypeScript Playground 의 기능

이 도구는 일상적인 TypeScript 검사를 위해 설계되었습니다. union 좁히기 검증, 제네릭 헬퍼 타입 테스트, 컴파일러 타겟 비교, strict 모드 동작 확인, TypeScript 가 출력하는 JavaScript 검토에 사용됩니다. 학습, 작은 예제 디버깅, 답변 준비, 프로젝트로 옮기기 전 작은 리팩터링 확인에 유용합니다.

TypeScript 컴파일러 사용 방법

  1. 에디터에 TypeScript 를 붙여넣거나 빠른 예제를 선택하세요.
  2. JavaScript 타겟과 모듈 형식을 선택하세요.
  3. 더 엄격한 진단을 원할 때는 strict 모드와 선택적 인덱스 액세스 검사를 활성화하세요.
  4. 컴파일 및 타입 검사를 클릭하거나, 실시간 피드백을 위해 자동 컴파일을 활성화 상태로 두세요.
  5. 진단을 검토하고, 출력된 JavaScript 를 확인한 후, 샌드박스화된 콘솔에서 간단한 스니펫을 실행하세요.

타입 검사 참고 사항

브라우저 컴파일러는 배열, 문자열, 레코드, JSON, console, 타이머와 같은 일반적인 JavaScript 객체에 대해 간결한 내장 선언 파일을 사용합니다. 덕분에 playground 는 스니펫에 대해 빠르고 자체 완결적으로 유지됩니다. 코드가 React, Node.js, DOM API 또는 패키지 특정 선언에 의존하는 경우, 실제 tsconfig.json 및 설치된 타입 패키지를 사용하여 프로젝트 내에서 최종 결과를 확인하세요.

예제와 사용 사례

큰 코드베이스에서 타입 오류를 분리하거나, strict 모드가 진단을 어떻게 변경하는지 비교하거나, 동료에게 TypeScript 개념을 설명하거나, 작은 스니펫이 JavaScript 로 어떻게 컴파일되는지 확인하려는 경우 이 playground 를 사용하세요. 내장된 예제는 구별된 유니온, 제네릭 레코드 헬퍼, satisfies 연산자 및 의도적인 타입 실수를 다루므로 깔끔한 컴파일러 상태와 실패한 컴파일러 상태를 모두 확인할 수 있습니다.

  • API 응답 모델에 추가하기 전에 union 타입을 검증하세요.
  • 전체 애플리케이션 빌드를 기다리지 않고 제네릭 헬퍼를 테스트하세요.
  • 타겟 또는 모듈 옵션을 변경할 때 출력된 JavaScript 를 검사하세요.
  • TypeScript 진단의 간결한 재현을 공유하세요.
프로덕션 빌드의 경우 이 페이지를 빠른 진단 작업 공간으로 사용한 후, 배포하기 전에 프로젝트 컴파일러, 번들러, 린터, 테스트 및 프레임워크 빌드를 실행하세요.

자주 묻는 질문

이 도구가 TypeScript 타입을 검사합니까?

예. 브라우저 내 TypeScript 프로그램을 빌드하고 타입 오류, 구문 오류 및 컴파일러 옵션 메시지를 포함한 컴파일러의 진단을 보고합니다.

TypeScript 컴파일러 옵션을 변경할 수 있습니까?

예. 주요 컨트롤은 JavaScript 타겟, 모듈 출력, strict 모드, 선언 파일 출력 및 noUncheckedIndexedAccess 를 다룹니다.

라이브러리 타입이 누락된 이유는 무엇입니까?

이 playground 는 의도적으로 간결한 내장 타입 라이브러리를 사용합니다. 프레임워크, DOM, Node.js 또는 npm 패키지 타입의 경우 로컬 프로젝트 설정을 사용하세요.

JavaScript 실행기는 안전합니까?

실행기는 빠른 스니펫을 위해 샌드박스화된 iframe 을 사용합니다. 신뢰할 수 없는 코드 실행은 피하고, 실제 앱 코드는 일반적인 개발 환경 내에서 테스트하세요.

이 콘텐츠, 페이지 또는 도구를 다음과 같이 인용하세요:

"TypeScript 플레이그라운드" - https://MiniWebtool.com/ko/typescript-플레이그라운드/에서 MiniWebtool 인용, https://MiniWebtool.com/

by miniwebtool team. Updated: 2026-05-23

웹 관리 도구:

주요 도구:

인스타그램 사용자 ID 조회분수 계산기애너그램 생성기평균 계산기내 행운의 숫자는?방어율 계산기사랑 궁합 계산기상대 표준 편차 계산기복리 계산기랜덤 이름 생성기무작위 토너먼트 대진표 생성기공백 제거피트 인치 센티미터 변환기👙 브라 사이즈 계산기근무 시간 계산기16진수 변환기🎮 게임 감도 변환기토크 변환기 (Nm, ft-lb, kgf-cm)소인수분해 계산기몫과 나머지 계산기16진수에서 10진수로 변환기월경주기 계산기기대 수명 계산기이미지 분할기음력 양력 변환기랜덤 미국 주 생성기무작위 초능력 생성기cm에서 피트와 인치로 변환기랜덤 시간 생성기CAGR 계산기OPS 계산기수면 계산기태양, 달 & 상승궁 계산기 🌞🌙✨잘고 텍스트 생성기로마-숫자-변환기줄 바꿈 제거💧 이슬점 계산기kg에서 파운드로 변환기10진수를 16진수로 변환분수 백분율 변환기연봉 인상 계산기랜덤 영어 단어 생성기파운드→킬로그램 변환기벤치 프레스 계산기러닝 페이스 계산기기울기 및 경사 계산기무작위 문자열 생성기랜덤 생일 생성기원형 면적 계산기WAR 계산기주사위 굴리기즉시 연금 계산기자동차 대출 계산기랜덤 그룹 생성기연비 계산기난수 선택기소수 검사기YouTube 채널 통계확률 계산기두 날짜 사이 일수 계산기퇴직금 계산기속도 변환기⏱️ 시간 계산기임신 날짜 계산기백분율 증가 계산기키 백분위수 계산기ppm에서 퍼센트 변환기비디오 이미지 추출기요일 계산기피보나치 되돌림 계산기FPS 변환기🌬️ 체감 온도 계산기📅 날짜 계산기임대 수익률 계산기초과 근무 수당 계산기ANC-계산기야구 장타율 계산기최대 공약수 계산기볼링 점수 계산기피타고라스 정리 계산기시저 암호 도구퍼센트 감소 계산기호 길이 계산기반지 사이즈 변환기혈당 변환기백분율 성장 계산기모스 부호 생성기급여 변환 계산기성적 계산기비율 및 백분율 계산기거꾸로-텍스트-생성기출산 예정일 계산기주식 평균 계산기랜덤 토론 주제 생성기분수에서 소수로 계산기일할 계산 월세 계산기MAC-주소-조회연중 일수 계산기 - 오늘은 올해의 몇 번째 날인가요퍼센트에서 PPM으로 변환기암호화폐 레버리지 계산기임신 주수 계산기자전거 기어비 계산기타원 둘레 계산기Hex-계산기문화별 나이 계산기변화율 계산기빈 줄 제거임신 체중 증가 계산기바코드 생성기배당 수익률 계산기타이어 크기 계산기양육비 계산기스도쿠 생성기 및 풀이기작은 텍스트 생성기 ⁽ᶜᵒᵖʸ ⁿ ᵖᵃˢᵗᵉ⁾야구 배팅 계산기시그마 표기법 계산기 (합산)파이의 처음 n 자리이닝당 적중률(WHIP) 계산기빗변 계산기취소선 텍스트 생성기반올림 계산기백분율 할인 계산기시험관 출산 예정일 계산기자동차 감가상각 계산기🖱️ 클릭 카운터페이스북 사용자 ID 조회단어 찾기 퍼즐 생성기순이익 계산기적분 계산기영업 마진 계산기주차 계산기중앙값 계산기GFR 계산기FFMI 계산기크레아티닌 청소율 계산기랜덤 동물 생성기조합 계산기복리 저축 계산기선형 회귀 계산기콜라츠 추측 계산기IP 서브넷 계산기📈 꺾은선 그래프 만들기허리-엉덩이-비율 계산기화성 별자리 계산기HEX에서 CMYK로 변환기가위바위보 생성기동영상 병합예쁜 글씨 생성기TDEE 계산기다항식 인수분해 계산기번호 정렬색상 조합 생성기의류 사이즈 변환기중복 줄 제거단백질 섭취량 계산기최소공배수 계산기혈중 알코올 농도 계산기MAC 주소 생성기자동차 리스 계산기중앙값 절대 편차 계산기십진수에서 이진수로 변환기이진수를 십진수로 변환주식 손익 계산기반전 텍스트오디오 추출기PSI에서 bar로 변환기공학용 계산기아기 성장 백분위수 계산기금리 계산기출루율 계산기산점도 작성기약물 용량 계산기Z 점수 계산기은퇴 계산기크로스워드 퍼즐 메이커원형 계산기다항식 전개 계산기랜덤 식사 생성기병렬 저항 계산기산술 평균 계산기⬛ 화면 비율 계산기YouTube 쇼츠 수익화 계산기계단 계산기불규칙 다각형 면적 계산기세제 사용량 계산기헌혈 시간 계산기온라인 문장 부호 제거 도구윤년은 언제입니까일일 복리 계산기직각삼각형 계산기⚔️ DPS 계산기태양 위치 계산기🎰 가챠 천장 계산기곡률 계산기속도 계산기수성 역행 달력시험 점수 계산기이진 계산기타일 계산기FIP 계산기아스팔트 계산기세제곱야드 계산기안테나 길이 계산기전선관 충전율 계산기직렬/병렬 커패시터 계산기유도 리액턴스 계산기방 조명 계산기럭스 루멘 계산기루멘 와트 변환기발전기 크기 계산기mAh to Wh 변환기3상 전력 계산기kVA 계산기암페어에서 와트 계산기Watts to Amps Calculator직렬 저항 계산기마찰 계산기경사면 계산기기계적 이득 계산기음속 계산기파동 속도 계산기부력 계산기종단 속도 계산기드브로이 파장 계산기광자 에너지 계산기E=mc² 계산기시간 지연 계산기케플러 제3법칙 계산기탈출 속도 계산기만유인력 계산기비어 람베르트 법칙 계산기네른스트 방정식 계산기삼투압 계산기끓는점 오름 계산기어는점 내림 계산기백분율 조성 계산기노르말 농도 계산기몰랄농도 계산기pKa Ka 변환기헨더슨 하셀바흐 계산기이론 수율 계산기한계 반응물 계산기전자 배치 계산기인터랙티브 주기율표AI 수업 지도안 생성기AI 퀴즈 생성기인용 생성기 (APA/MLA/Chicago)출석률 계산기AP 점수 계산기ACT 점수 계산기SAT 점수 계산기백분율 CGPA 변환기CGPA 백분율 변환기쉬운 채점기 (EZ Grader)자녀 양육비 계산기아기 우유 섭취량 계산기기저귀 사이즈 계산기아기 이름 생성기아기 눈 색깔 예측기어린이 BMI 백분위수 계산기자녀 키 예측기hCG 배가 시간 계산기착상 계산기중국식 성별 예측기ISO 8601 날짜 포맷터율리우스일 변환기낮잠 계산기Moon Phase CalculatorSunrise & Sunset Calculator세계 시계날짜 로마 숫자 변환기은퇴 카운트다운금주 계산기반 생일 계산기기념일 계산기팁 분배 계산기이메일 마케팅 ROI 계산기리드당 비용 계산기운전자본 계산기공헌이익 계산기FIFO / LIFO 계산기안전 재고 계산기재주문점 계산기경제적 주문량(EOQ) 계산기감가상각 계산기수공예 가격 계산기도매가격 계산기Shopify 수익 계산기Amazon FBA 계산기eBay 수수료 계산기Etsy 수수료 계산기Stripe 수수료 계산기PayPal 수수료 계산기베팅 배당률 변환기십일조 계산기자카트 계산기UK 인지세 계산기HRA 공제 계산기그래튜이티 계산기NPS 계산기EPF 계산기PPF 계산기RD 계산기SWP 계산기그로스업 계산기대출 비교 계산기신용 사용률 계산기CD 사다리 계산기T-Bill 미국 단기 국채 계산기I Bond 계산기529 대학 저축 계산기HSA 계산기인보이스 생성기출장 일비 계산기주행거리 환급 계산기임대료 인상 계산기임대료 부담 계산기차량 실구매가 계산기자동차 구매 가능 금액 계산기오토바이 대출 계산기캠핑카 대출 계산기보트 대출 계산기토지 대출 계산기건설 대출 계산기이자 전용 모기지 계산기벌룬 대출 계산기모기지 포인트 계산기PMI 계산기격주 모기지 상환금 계산기ARM 모기지 계산기VA 대출 계산기실수령액 급여 계산기AI SQL 쿼리 생성기AI 정규식 생성기AI 데이터 시각화 도구 (CSV 붙여넣기)AI 텍스트 톤 분석기AI 이력서 분석기AI 단위 변환기 (자연어)AI 사과 편지 작성기AI 정중한 핑계 생성기AI 여행 일정 생성기AI 독서 목록 생성기AI 운동 계획 생성기AI 식단 생성기AI 선물 아이디어 생성기AI 레시피 생성기 (재료로 만들기)장학금 ROI 계산기대학 비용 계산기언어 유창성까지 학습 시간 계산기어휘 퀴즈 생성기코넬 노트 생성기학습 곡선 계산기플래시카드 간격 반복 스케줄러페인트 색상 혼합 계산기타일 줄눈 계산기식스 시그마 공정 능력 계산기YouTube 썸네일 다운로더유튜브 수익 추정기무작위 RPG 캐릭터 생성기
×

우리에게 호의를 베풀고 3개의 간단한 질문에 답하세요.

설문조사에 응해주셔서 감사합니다. 귀하의 의견은 서비스를 개선하는 데 도움이 됩니다.

어디에서 우리에 대해 처음 들었습니까?

우리 사이트에서 가장 좋아하는 도구는 무엇입니까?

다른 경우, 지정하십시오:

이 도구를 친구에게 추천할 가능성은 얼마나 됩니까?

불가능한가능성이 가장 높음

가능성 점수: (1-10)