liminfo

TypeScript Playground

TS WASM 컴파일러 기반 타입 체크 브라우저 에디터

예제:
function greet(user) {
  return `Hello, ${user.name}!`;
}

const users = [];

function findUser(id): User | undefined {
  return users.find((u) => u.id === id);
}
인터페이스/타입 1개 제거타입 어노테이션 5개 제거
참고: 이것은 기본적인 텍스트 변환입니다. 일반적인 패턴(인터페이스, 타입 어노테이션, 제네릭, enum)을 처리하지만 모든 엣지 케이스를 포함하지 않을 수 있습니다. 프로덕션 사용을 위해서는 공식 TypeScript 컴파일러를 고려하십시오.

관련 도구

TypeScript 레퍼런스JavaScript 레퍼런스React 레퍼런스Jest 레퍼런스Web API 레퍼런스

TypeScript Playground 소개

TypeScript 플레이그라운드는 TypeScript 전용 구문을 제거하여 일반 JavaScript를 생성하는 무료 브라우저 기반 도구입니다. interface와 type 선언 전체 제거, 함수 파라미터와 반환값의 타입 어노테이션 제거, `Array<User>` 같은 제네릭 타입 파라미터를 `Array`로 변환, `as Type` 캐스트 표현식 제거, non-null assertion 연산자(`!.`) 정리, `readonly` 수정자 삭제, 기본 enum 선언 주석 처리 등 가장 일반적인 TypeScript 구문을 처리합니다.

이 도구는 TypeScript 코드 스니펫의 JavaScript 동등 코드를 빠르게 확인하고 싶은 개발자, 컴파일 시 어떤 부분이 타입 소거(type erasure)되는지 배우는 학생, TypeScript 코드를 일반 JavaScript 환경에 붙여넣어야 하는 엔지니어에게 유용합니다. 좌우 분할 레이아웃으로 왼쪽에 TypeScript 입력, 오른쪽에 JavaScript 출력이 실시간으로 업데이트됩니다.

변환은 컴파일러 AST가 아닌 정규식 패턴을 사용한 텍스트 기반 처리로 이루어집니다. 일반적인 패턴 대부분을 정확하고 즉각적으로 처리합니다. 출력 아래의 경고 패널에는 문제가 있거나 주의가 필요한 구문이 표시됩니다. 예를 들어 enum이 발견되면 런타임 동작 개선을 위해 const 객체로 교체하도록 안내합니다. 프로덕션 트랜스파일에는 공식 TypeScript 컴파일러나 esbuild, SWC를 권장합니다.

주요 기능

  • `interface` 및 `type` 선언(exported 포함)을 완전히 제거하여 깔끔한 JS 출력 생성
  • 함수 파라미터의 타입 어노테이션 제거: `(id: number)`가 `(id)`로 변환
  • 함수 반환 타입 어노테이션 제거: `(): string {`이 `() {`로 변환
  • 호출과 선언에서 제네릭 타입 파라미터 제거: `Array<User>`가 `Array`로 변환
  • TypeScript 전용 구문인 `as Type` 캐스트 표현식 제거
  • Non-null assertion 연산자 정리: `user!.name`이 `user.name`으로 변환
  • 프로퍼티와 파라미터 선언에서 `readonly` 수정자 삭제
  • Enum 제거 시 경고를 표시하고 const 객체 대안 제안

자주 묻는 질문

이 플레이그라운드가 처리하는 TypeScript 구문은 무엇인가요?

interface 및 type 별칭 선언, 변수와 파라미터의 타입 어노테이션, 함수 반환 타입 어노테이션, 호출과 선언의 제네릭 타입 파라미터, `as Type` 캐스트 표현식, non-null assertion 연산자(`!`), `readonly` 수정자, 기본 enum 선언을 처리합니다. 일상적인 TypeScript 패턴의 대부분을 커버합니다.

`tsc --noEmit`이나 Babel을 실행하는 것과 같은가요?

아니요. 이것은 정규식을 사용한 텍스트 기반 변환으로, 완전한 컴파일러나 AST 변환기가 아닙니다. 타입 검사를 수행하지 않고, 임포트를 해석하지 않으며, 모든 엣지 케이스를 처리하지 않습니다. 정확한 프로덕션 품질의 트랜스파일을 위해서는 공식 TypeScript 컴파일러(`tsc`), Babel(`@babel/preset-typescript`), esbuild, 또는 SWC를 사용하세요.

왜 플레이그라운드가 enum에 대해 경고하나요?

TypeScript enum은 런타임 구문으로 실제 JavaScript 객체를 생성합니다. 완전한 변환을 위해서는 enum 본문 구조를 이해하고 런타임 값을 보존해야 하므로, 이 도구는 enum을 주석 처리하고 모던 TypeScript에서 관용적이며 일반 JS로 자연스럽게 트랜스파일되는 `const` 객체 사용을 권장합니다.

TypeScript가 컴파일 시 무엇을 소거하는지 배우는 데 쓸 수 있나요?

네, 이것이 가장 유용한 사용 사례 중 하나입니다. TypeScript의 타입 소거(type erasure)는 인터페이스, 타입 어노테이션, 제네릭이 컴파일된 출력에서 완전히 사라진다는 것을 의미합니다. 변환 전후를 나란히 보면 어떤 TypeScript 기능이 순수 컴파일 타임 구문인지, 어떤 것이 런타임 동작에 영향을 미치는지 효과적으로 이해할 수 있습니다.

출력이 유효한 JavaScript로 컴파일되지 않는 이유는 무엇인가요?

변환이 정규식 기반이므로 복잡하게 중첩된 제네릭, 조건부 타입, 템플릿 리터럴 타입 또는 일반적이지 않은 패턴은 올바르게 처리되지 않을 수 있습니다. 도구 UI에서도 기본 변환이며 모든 엣지 케이스가 커버되지 않을 수 있다고 안내합니다. 프로덕션에서 사용하기 전에 출력을 반드시 검증하세요.

TypeScript 데코레이터를 처리할 수 있나요?

아니요, 데코레이터 구문(`@Injectable`, `@Component` 등)은 현재 처리되지 않습니다. 데코레이터는 올바르게 처리하려면 AST 수준의 변환이 필요한 고급 TypeScript/ECMAScript 기능입니다. 데코레이터를 많이 사용하는 코드베이스에는 `experimentalDecorators`를 활성화한 공식 TypeScript 컴파일러를 사용하세요.

React TSX 컴포넌트에서도 작동하나요?

부분적으로 작동합니다. TSX 코드에서 타입 어노테이션과 인터페이스를 제거합니다. 하지만 JSX 구문 자체는 변환되지 않아 출력에 JSX 태그가 그대로 남습니다. JSX 변환을 포함한 완전한 TSX → JS 변환에는 tsc, Babel, 또는 esbuild를 사용하세요.

이 도구를 사용할 때 코드가 서버로 전송되나요?

아니요. 모든 변환은 JavaScript 정규식 연산을 사용해 브라우저에서 로컬로 이루어집니다. TypeScript 코드는 서버로 업로드되거나 데이터베이스에 저장되거나 제3자와 공유되지 않습니다. 페이지가 로드된 후에는 완전히 오프라인에서 작동합니다.