TypeScript에서 JavaScript로 변환 — Numio
TypeScript 타입(주석, interface, 타입 별칭, 제네릭)을 제거해 일반 JavaScript를 얻습니다. .ts와 .tsx 모두 지원하며, JSX는 그대로 유지되므로 TSX 컴포넌트는 JSX가 됩니다. 코드는 서버에서 변환되며 타입 검사, 번들링, 실행은 하지 않습니다.
JS 프로젝트에서 쓰기 전에 TypeScript 코드 조각이 일반 JavaScript로 어떻게 보이는지 확인할 때.
Code is converted on the server. No type-checking, execution or dependency bundling is performed. JSX is preserved.
TypeScript
JavaScript
이럴 때 사용하세요
- JS 프로젝트에서 쓰기 전에 TypeScript 코드 조각이 일반 JavaScript로 어떻게 보이는지 확인할 때.
- prop 타입을 제거하고 JSX는 유지해서 React .tsx 컴포넌트를 .jsx로 바꿀 때.
사용 방법
- TypeScript나 TSX를 붙여 넣거나 예시(interface와 함수, 제네릭, JSX)를 불러옵니다. 예시를 불러오면 입력이 대체됩니다.
- 오른쪽에서 JavaScript를 확인합니다. 타입 주석과 interface는 사라지고, enum처럼 런타임에 존재하는 코드는 JavaScript로 출력됩니다.
- 결과를 복사합니다. 타입 안전성이 필요하면 원래 TypeScript를 tsc --noEmit으로 따로 타입 검사하세요.
TypeScript 입력
interface User { name: string }
const greet = (user: User): string => "Hello, " + user.name;JavaScript 출력
const greet = (user) => "Hello, " + user.name
세부 정보 및 제한 사항
코드는 변환을 위해 douni.one 서버로 전송됩니다. 비밀 정보, API 키, 공유할 수 없는 소스 코드는 붙여 넣지 마세요.
타입 제거는 타입 검사가 아닙니다. const count: number = "text"도 오류 없이 변환됩니다. 타입은 TypeScript 컴파일러로 검사하세요.
JSX는 JSX로 남습니다. 브라우저에서 React 컴포넌트를 실행하려면 여전히 프로젝트의 JSX 빌드 단계가 필요합니다.
enum처럼 런타임 값이 있는 구문은 사라지지 않고 JavaScript 코드를 생성합니다.
붙여 넣은 코드만 변환합니다. import는 해석하지 않고, 파일을 번들링하지 않으며, 구형 브라우저용으로 최신 문법을 다운레벨링하지도 않습니다.
FAQ
TSX를 JSX로 변환할 수 있나요?
네. .tsx 컴포넌트를 붙여 넣으면 prop 타입과 interface가 제거되고 JSX는 그대로 남으므로, 결과를 .jsx로 저장할 수 있습니다. JSX를 React.createElement 호출로 컴파일하는 것은 이 도구의 범위가 아닙니다.
tsc를 실행하는 것과 무엇이 다른가요?
tsc는 프로젝트 전체를 타입 검사하고 지정한 target에 맞춰 JavaScript를 출력할 수 있습니다. 이 페이지는 Babel의 TypeScript transform으로 붙여 넣은 코드의 타입만 제거하고, 최신 문법을 유지하며, 타입 오류는 보고하지 않습니다. 프로젝트 전체에는 로컬에서 tsc나 esbuild 같은 번들러를 실행하세요.
타입 오류가 있는 코드도 변환된 이유는 무엇인가요?
변환은 구문 수준에서만 이루어집니다. 대입이나 함수 호출을 타입과 대조하지 않으므로, 타입 오류를 찾으려면 프로젝트에서 TypeScript 컴파일러를 실행하세요.
구문 오류가 나면 무엇을 확인해야 하나요?
보고된 줄과 열, 그 주변의 괄호, 해당 위치의 타입 주석을 확인하세요. 코드를 작은 조각으로 줄이면 문제를 좁히는 데 도움이 됩니다. 연결 오류라면 Retry를 사용하세요.