온라인 TypeScript 에디터란?
온라인 TypeScript 에디터는 별도의 IDE를 설치하지 않고 브라우저에서 TypeScript 코드를 작성하고 타입 오류를 확인한 뒤 바로 실행할 수 있는 도구입니다. TypeScript는 JavaScript에 타입 문법과 정적 타입 검사를 더해, 코드가 실행되기 전에 잘못된 타입 사용을 찾는 데 도움을 줍니다.
이 에디터는 한 파일만 실행하는 간단한 플레이그라운드보다 실제 개발 흐름에 가깝게 사용할 수 있도록 Explorer, 여러 파일 탭, Problems, Console, Terminal, strict 검사, 파일 가져오기·내보내기를 함께 제공합니다.
온라인 TypeScript 에디터 사용 방법
Explorer에서 실행할
.ts 파일을 선택하고 코드를 작성한 뒤 실행 버튼을 누르세요. 먼저 TypeScript 타입 검사를 수행하고, 오류가 있으면 하단 Problems 탭에 파일명·줄·열·TS 오류 코드를 표시합니다. 타입 오류가 없으면 JavaScript로 변환한 뒤 실행하며, console.log() 등의 출력은 Console에서 확인할 수 있습니다.키보드에서는
Ctrl/⌘ + Enter로 실행하고,Ctrl/⌘ + S로 브라우저에 저장하며,Ctrl + Space로 자동 완성을 열 수 있습니다.strict 타입 검사란?
상단의 TS strict 옵션을 켜면 TypeScript의
strict 설정에 해당하는 더 엄격한 타입 검사를 적용합니다. 예를 들어 암시적인 any, nullable 값 처리, 함수 타입 호환성처럼 실수하기 쉬운 부분을 더 적극적으로 확인할 수 있습니다. 간단한 문법 실험에서는 기본 모드로 바꿔 검사 강도를 낮출 수도 있습니다.여러 TypeScript 파일을 함께 작성하기
main.ts, utils.ts처럼 파일을 나눠 작성하고import { formatPrice } from './utils'처럼 상대경로로 불러올 수 있습니다. JSON 파일도 같은 워크스페이스에 추가할 수 있으며, 새 파일 생성, 이름 변경, 삭제, 드래그 앤 드롭 가져오기와 폴더 가져오기를 지원합니다.Problems에서 타입 오류 확인하기
타입 검사에서 문제가 발견되면 Problems 탭에
TS2322 같은 오류 코드와 함께 위치가 표시됩니다. 문제 항목을 누르면 해당 파일과 줄로 이동하므로 여러 파일을 사용하는 예제에서도 오류 위치를 빠르게 찾을 수 있습니다. 코드를 수정하면 기존 진단은 초기화되고 다음 실행 시 다시 검사합니다.Terminal 입력과 readline 사용
Terminal에서
node main.ts처럼 현재 TypeScript 파일을 실행할 수 있습니다.readline과 readline/promises도 기본적인 입력 흐름을 지원하며, 실행 중 입력창에서 값을 넣거나 EOF 버튼으로 입력 종료를 전달할 수 있습니다.브라우저 저장과 파일 내보내기
작성 중인 워크스페이스는 브라우저 저장소에 보관해 같은 브라우저에서 다시 이어서 편집할 수 있습니다. 현재 파일만 내려받거나 전체 파일을 ZIP으로 묶어 내보낼 수도 있습니다. 중요한 소스는 브라우저 저장만 믿기보다 파일 또는 ZIP으로 별도 백업해두는 것이 안전합니다.
fetch와 비동기 코드 테스트
async/await, Promise, fetch()를 사용하는 코드를 실행할 수 있습니다. 외부 API 호출은 브라우저에서 직접 요청하므로 대상 서버가 CORS 요청을 허용해야 하며, 서버 전용 환경 변수나 실제 Node.js 서버 기능이 필요한 코드는 로컬 개발 환경에서 실행해야 합니다.지원 범위와 제한 사항
- 지원 파일: TypeScript(.ts), 선언 파일(.d.ts), JSON, TXT, Markdown
- 실행 파일: 일반
.ts파일 - 워크스페이스 모듈: 상대경로 import/require와 JSON 파일
- 기본 모듈: path, util, readline, readline/promises, url, querystring, assert의 브라우저 호환 기능 일부
- 지원하지 않는 기능: npm install, 임의 npm 패키지 실행, fs 기반 로컬 파일 시스템, 완전한 Node.js 서버 런타임
어떤 경우에 유용한가요?
- TypeScript 문법 연습: interface, type, union, generic, type guard를 바로 시험할 때
- 타입 오류 확인: 작은 코드 조각에서 타입 추론과 strict 검사 결과를 확인할 때
- 알고리즘 문제 풀이: 타입을 붙인 입력·출력 코드를 빠르게 실행할 때
- 여러 파일 예제: 유틸리티 함수와 JSON 데이터를 나눠 import할 때
- 비동기 코드 테스트: Promise, async/await, fetch 동작을 확인할 때
자주 묻는 질문
- Q. 타입 오류가 있어도 실행할 수 있나요?A. 이 에디터는 타입 오류가 있으면 실행을 중단하고 Problems에 먼저 표시합니다. 타입 오류를 수정한 뒤 다시 실행해주세요.
- Q. tsconfig.json을 직접 편집할 수 있나요?A. 현재는 전체 tsconfig 편집 대신 화면에서 strict 여부를 선택할 수 있도록 구성되어 있습니다. 실제 프로젝트의 세부 compilerOptions를 그대로 재현해야 한다면 로컬 TypeScript 프로젝트가 더 적합합니다.
- Q. import 문법을 사용할 수 있나요?A. 네, 같은 워크스페이스의 TypeScript 파일은 상대경로 import를 사용할 수 있습니다. 외부 npm 패키지는 설치할 수 없습니다.
- Q. 코드는 서버로 전송되나요?A. 에디터의 TypeScript 검사와 실행은 브라우저에서 처리됩니다. 다만 코드에서 직접 fetch()로 외부 API를 호출하면 해당 요청은 지정한 서버로 전송됩니다.
- Q. 모바일에서도 사용할 수 있나요?A. 사용할 수 있습니다. 모바일에서는 공간을 확보하기 위해 일부 도구를 메뉴 안에 배치하며 Explorer, Problems, Console, Terminal과 전체화면을 사용할 수 있습니다.
