TypeScript Playground란

TypeScript Playground는 웹 브라우저에서 TypeScript 코드를 작성하고 실행할 수 있는 온라인 도구입니다. Microsoft가 공식으로 제공하며, 설치 없이 바로 사용할 수 있습니다.

주소: https://www.typescriptlang.org/play

Playground 화면 구성

Playground에 접속하면 크게 두 영역으로 나뉩니다.

• 왼쪽: TypeScript 코드를 작성하는 에디터
• 오른쪽: 컴파일된 JavaScript 결과, 에러 목록, 실행 결과 등을 확인하는 패널

Playground 활용법

코드 작성과 실행

왼쪽 에디터에 다음 코드를 입력해보겠습니다.

const greeting: string = "안녕하세요, TypeScript!";console.log(greeting);

상단의 Run 버튼을 클릭하면 하단의 Logs 탭에서 실행 결과를 확인할 수 있습니다.

컴파일 결과 확인

오른쪽 패널의 .JS 탭을 클릭하면 TypeScript가 어떤 JavaScript로 변환되는지 볼 수 있습니다. 타입 표기가 제거된 순수 JavaScript 코드가 표시됩니다.

에러 확인

의도적으로 잘못된 코드를 작성해봅니다.

const age: number = "스물다섯";

에디터에 빨간 밑줄이 나타나고, 오른쪽 패널의 Errors 탭에서 에러 내용을 확인할 수 있습니다.

타입 정보 확인

에디터에서 변수 위에 마우스를 올리면 TypeScript가 추론한 타입 정보를 볼 수 있습니다. 이 기능은 타입 추론이 어떻게 동작하는지 이해하는 데 매우 유용합니다.

const numbers = [1, 2, 3]; // numbers 위에 마우스를 올리면 number[] 타입이 표시됩니다

언제 Playground를 사용할까

Playground는 다음과 같은 상황에서 유용합니다.

• 빠른 실험: 작은 코드 조각을 테스트하고 싶을 때
• 타입 확인: 특정 표현식의 타입이 무엇인지 확인하고 싶을 때
• 컴파일 결과 비교: TypeScript 코드가 어떤 JavaScript로 변환되는지 보고 싶을 때
• TypeScript 버전 비교: 설정에서 TypeScript 버전을 바꿔가며 테스트할 수 있습니다

이 책의 예제 코드 중 짧은 코드는 Playground에서 바로 실행해볼 수 있습니다. 긴 프로젝트 코드는 로컬 환경(VS Code + tsx)에서 작성하는 것이 편리합니다.

정리

개발 환경 준비가 모두 끝났습니다. 다음 PART부터 본격적으로 TypeScript의 타입 시스템을 배워보겠습니다.