자바스크립트 타입스크립트 변환: PropTypes를 인터페이스로
여기에서 자바스크립트 타입스크립트 변환을 바로 할 수 있어요. 마이그레이션의 가장 지루한 첫 단계를 덜어 줘요. 파서로 코드를 읽어서 React PropTypes를 인터페이스로 바꾸고, 기본값에서 타입을 가져오고, 알아낼 수 있는 타입을 추가한 뒤 정리된 TypeScript를 돌려줘요.한 번에 파일 하나나 코드 조각을 처리하고, 코드를 실행하지 않고, 아무것도 업로드하지 않아요. 알 수 없는 부분은 직접 채우도록 남겨 둬요. 무엇이 남는지는 아래에서 정확히 설명해요.
JS TS 변환 사용 방법
- JavaScript 또는 JSX 칸에 코드를 붙여넣으세요. 붙여넣기 전에는 "여기에 JavaScript 또는 JSX를 붙여넣으세요…"라고 보여요. 한도는 500만 자예요.
- 잠시 기다리세요. 입력하거나 붙여넣고 약 0.35초 뒤에 자동으로 변환돼서 누를 버튼이 없어요.
- 결과는 "TypeScript" 제목 아래에 나와요. 코드에 JSX가 있으면 "TypeScript (TSX)"예요. 읽기 전용이고 색으로 구분돼요.
- 코드 위의 표시를 확인하세요. "인터페이스 2개를 작성했어요", "타입 주석 11개를 추가했어요"처럼 한 일이 나와요. 타입이 필요한 곳이 없으면 "타입이 필요한 곳이 없어서 코드를 정리만 했어요."라고 나와요.
- 클립보드에 복사를 선택하세요. 표시가 "복사했어요"로 바뀌어요.
- 코드 아래의 변환 옵션에는 React 모드와 Strict 모드 두 개의 체크박스가 있어요. 하나라도 바꾸면 코드가 다시 변환돼요.
올바른 JavaScript가 아니면 "올바른 JavaScript가 아니에요. N번째 줄 M번째 열에 구문 오류가 있어요."라고 나오고, 문제가 된 줄과 위치 표시가 함께 보여요. 이미 TypeScript 구문이 들어 있는 코드는 올바르지 않은 것으로 처리돼요. 붙여넣은 코드만 다루기 때문에 컴포넌트, 모듈, 코드 조각에 알맞아요. 저장소 전체를 한 번에 바꾸는 용도는 아니에요.
예시: PropTypes가 있는 React 컴포넌트
입력은 PropTypes와 타입이 없는 이벤트 핸들러가 있는 작은 카운터예요. 변환하면 CounterProps 인터페이스가 만들어져요. label은 isRequired 때문에 필수이고, start와 onChange는 선택이에요. 기본값 n = 1은 n: number = 1이 되고, button의 onClick 핸들러에서는 e에 버튼 요소용 React.MouseEvent 타입이 붙어요. 쓰지 않는 prop-types import는 지워지고, JSX는 Prettier가 여러 줄로 정리해요. 표시는 "인터페이스 1개를 작성했어요"와 "타입 주석 3개를 추가했어요"예요.
바뀌지 않는 부분도 있어요. useState(start)는 그대로예요. 값이 쓰이는 방식을 보고 타입을 추측하지 않기 때문이에요.
PropTypes를 TypeScript 인터페이스로 바꾸는 방식
React 모드를 켜면 컴포넌트의 PropTypes로 이름Props라는 인터페이스를 만들어 컴포넌트 위에 두고, props의 타입으로 써요. 함수 컴포넌트(선언문, 화살표 함수, memo로 감싼 것)와, 정적 propTypes나 Foo.propTypes = {...} 대입이 있는 클래스에서 동작해요. .isRequired가 붙은 prop은 필수이고, 나머지에는 ?가 붙어요. prop 위의 주석은 인터페이스로 옮겨져요.
string과number는 그대로string과numberbool은booleanfunc는 인수를 가리지 않는 함수 타입array와object는any[]와, 키가string인 Recordnode와element는ReactNode와ReactElementarrayOf(T)와objectOf(T)는T[]와, 값이T인 RecordoneOf([...])는'sm' | 'lg'같은 리터럴 유니온oneOfType([...])는 나열한 타입의 유니온shape({...})와exact({...})는 객체 타입instanceOf(Foo)는Foo
propTypes 문은 지워지고, 다른 곳에서 쓰지 않으면 prop-types import도 지워져요. 클래스 컴포넌트는 this.state = {...}에서 state 인터페이스도 받아요. PropTypes가 없는 클래스는 읽어 낸 this.props.x로 props 인터페이스를 만들어요. PropTypes가 없는 함수 컴포넌트는 Strict 모드일 때만 props 인터페이스를 받아요.
PropTypes 없이 추가되는 타입과 Strict 모드
- 기본값: 기본값이 있는 매개변수는 그 값으로 타입이 정해져요.
n = 5는n: number = 5,let x = 0은let x: number = 0이 돼요. - 반환 타입: 모든
return이 같은 기본 타입(string,number,boolean)을 돌려주거나return이 없을 때 추가돼요. 뒤의 경우는void,async함수라면void의 Promise예요. - 클래스 필드: 클래스 안의 모든
this.x = ...(아무것도 상속하지 않는 클래스나 React 컴포넌트)에 속성 선언이 붙어요. - React 이벤트: DOM 요소의 핸들러 매개변수에는
onChange,onClick,onSubmit등에 맞춰React.ChangeEvent같은 이벤트 타입이 붙어요. - ref:
useRef(null)은 연결된ref={...}에서 요소 타입을 가져와요.
Strict 모드는 기본으로 꺼져 있어요. 켜면 타입을 알아낼 수 없는 곳이 모두 보여요. let x;는 let x: any;, const list = []는 any[]가 되고, 타입 없는 매개변수에는 : any가 붙어요. 꺼져 있으면 그런 곳은 타입 없이 남아요. 켜 두면 나중에 고칠 곳을 검색하기 쉬워요.
바꾸지 않는 것, 주석 처리, 개인정보
코드 한 조각만 읽고 추측은 하지 않아요. 다음 경우는 그대로 남거나 any가 돼요.
items.map((x) => ...)처럼 호출에 바로 넘기는 콜백 매개변수: 그대로 둬요. 받는 함수 쪽에서 TypeScript가 타입을 정할 수 있게 하려는 거예요.- 다른 파일의 타입이나 직접 만든 PropTypes 검증 함수:
any가 되고, 검증 함수 자체는 남지 않아요. forwardRef컴포넌트: PropTypes를 건드리지 않아요.- JSDoc 타입 주석: 읽지 않아요.
- 매개변수 이름이나 쓰임새로 타입을 짐작하는 일: 하지 않아요.
- 파일을 넘나드는 추론: 하지 않으니 파일을 하나씩 변환하고 확인하세요.
- React 모드가 꺼져 있을 때의 PropTypes: 그대로 둬요.
결과는 첫 단계일 뿐 끝난 마이그레이션이 아니에요. 프로젝트에 붙여넣고 tsc를 실행해서 any를 하나씩 직접 다듬으세요. 파일 이름은 바꾸지 않으니 컴포넌트는 직접 .tsx로 저장하세요.
주석과 레이아웃은 그대로 유지돼요. 코드는 @babel/parser로 읽고, 타입 주석은 원래 텍스트에 편집으로 끼워 넣고, 그 결과를 Prettier가 정리해요. 따옴표 스타일, 세미콜론, 들여쓰기 폭은 유지돼요. 해석, 편집, 정리는 모두 브라우저의 Web Worker에서 동작하고, 코드가 업로드되거나 실행되는 일은 없어요. 변환 전에 코드를 정리하려면 코드 포맷터를, 압축되거나 난독화된 스크립트를 먼저 읽어 보려면 JS 난독화 해제를 쓰세요.
자주 묻는 질문
JS를 TS로 어떻게 바꾸나요?
JavaScript나 JSX를 "JavaScript 또는 JSX" 칸에 붙여넣으세요. 약 3분의 1초 뒤에 "TypeScript" 제목 아래에 결과가 나와요. 코드에 JSX가 있으면 "TypeScript (TSX)"예요. 변환 버튼은 없어요. 결과는 "클립보드에 복사"로 가져가세요.
React PropTypes를 TypeScript 인터페이스로 바꿀 수 있나요?
네. React 모드를 켜면 각 propTypes 객체가 컴포넌트 이름을 딴 인터페이스(예: CounterProps)가 돼요. isRequired가 붙은 prop은 필수이고 나머지에는 물음표가 붙어요. propTypes 문은 지워지고, 파일의 다른 곳에서 쓰지 않으면 prop-types import도 지워져요. 함수 컴포넌트와 정적 propTypes가 있는 클래스에서 동작해요.
jsx tsx 변환은 어떻게 하나요?
JSX 컴포넌트를 붙여넣으세요. 코드에 JSX가 있으면 결과 제목이 "TypeScript (TSX)"가 되고 React 모드가 저절로 켜져서, props에는 인터페이스가, 핸들러에는 이벤트 타입이 붙어요. 파일 이름은 바꾸지 않으니 결과를 .tsx 확장자로 저장하세요.
React 모드와 Strict 모드는 무엇을 하나요?
변환 옵션의 React 모드는 PropTypes를 인터페이스로 바꾸고 이벤트 핸들러, props, 훅에 타입을 붙여요. 코드에 JSX, react, prop-types가 있으면 기본으로 켜지고, 끄면 PropTypes는 그대로 남아요. Strict 모드는 기본으로 꺼져 있고, 타입을 알아낼 수 없는 곳에 생략하지 않고 명시적인 any를 써요.
결과에 any가 남는 이유는 무엇인가요?
타입은 코드 자체에서 읽을 수 있을 때만 써요. 직접 만든 PropTypes 검증 함수나 다른 파일에서 가져온 타입은 any가 되고, Strict 모드는 타입 없는 변수와 매개변수에 명시적인 any를 붙여요. 결과는 첫 단계예요. tsc로 확인해서 any를 실제 타입으로 바꾸세요.
콜백 매개변수에 타입이 붙지 않은 이유는 무엇인가요?
items.map((x) => x.id)의 x처럼 호출에 바로 넘긴 매개변수는 일부러 그대로 둬요. 콜백을 받는 함수 쪽에서 TypeScript가 타입을 정할 수 있게 하려는 거예요.
주석과 서식이 그대로 유지되나요?
주석은 유지돼요. 코드를 새로 만드는 대신 타입 주석을 원래 텍스트에 편집으로 끼워 넣기 때문이에요. 그다음 Prettier가 정리하면서 따옴표 스타일, 세미콜론, 들여쓰기 폭은 유지하지만 긴 줄은 다시 줄바꿈할 수 있어요. PropTypes 항목 위의 주석은 해당 인터페이스 속성으로 옮겨져요.
코드가 업로드되거나 실행되나요?
아니요. 코드는 브라우저의 Web Worker에서 해석되고 다시 쓰이며, 서버로 보내지지 않아요. 실행도 되지 않으니 부작용이 있는 스크립트를 붙여넣어도 괜찮아요. 구문 오류가 있으면 줄 번호와 열 번호가 나와요. 한도는 500만 자예요.
