JSON→TS 변환
JSON을 보고 타입스크립트 interface를 추론해 만들어요.
이럴 때 쓰세요
이렇게 사용하세요
결과가 예상과 다를 때
결과가 잘려 보여요
전체 결과는 복사 버튼으로 받을 수 있어요.
입력한 내용이 사라졌어요
이 기기에 자동 저장돼요. 브라우저 저장소를 지우면 함께 사라져요.
자주 하는 실수
- null은 값이라 타입이 아니라 null 리터럴로 나옵니다. 실제로는 선택값이 거의이니 score?: number 로 바꿔야 타입이 맞습니다.
- 하이픈이나 공백이 든 키는 그대로 content-type: string; 로 나와 문법 오류가 납니다. 필드명에도 따옴표를 붙여야 해요.
- 배열 안에서 모양이 다른 객체는 이름이 같은 인터페이스가 여러 개 생깁니다. 루트 이름을 붙여 구별하거나 입력을 정리하세요.
- 루트 이름을 한글로 넣으면 영문자만 남아 이름이 T 가 됩니다. 중첩 키에 밑줄이 있어도 이름에서는 사라져 user_name 은 Userid 가 돼요.
계산 근거
TypeScript의 인터페이스는 선택 표시 ? 를 값의 존재 여부로 판단하지 않고 문법으로 표기합니다. 배열은 element 타입 뒤에 대괄호를 붙이며, 원소마다 타입이 다르면 괄호로 묶어 합집합으로 씁니다. 중첩 객체는 이름에서 영문자와 숫자만 남겨 인터페이스 이름으로 씁니다.
실제로 계산해 보면
id·name·tags·meta가 있는 객체를 변환하면 어떤 인터페이스가 나오나요?
Meta 와 Root 두 개가 나옵니다. Meta 는 open: boolean; score: null; 를 담고 Root 는 id: number; name: string; tags: string[]; meta: Meta; 를 담습니다.
배열에 숫자와 문자열이 섞여 있으면?
vals: (number | string | null)[] 처럼 합집합으로 나옵니다. 합집합 안의 null 은 그대로 null 이라 실제 응답에서 빠질 수 있는 값을 다뤄야 합니다.
안의 원소를 하나도 못 본 빈 배열은요?
빈 배열은 unknown[] 로 나옵니다. 안에 뭐가 들어갈지 알 수 없기 때문이며, 실제 타입으로 좁혀 쓰는 편이 안전합니다.
더 궁금한 것
선택 필드와 필수 필드는 어떻게 구분되나요?
구분되지 않습니다. 표본에 등장한 키는 모두 필수로 적힙니다. 한 건만 모은 표본을 넣으면 실제로는 없을 수 있는 필드까지 필수로 굳어 버리니, 생성 뒤 직접 물음표를 붙이세요.
interface 이름이 겹치면 어떻게 하나요?
같은 이름의 인터페이스를 여러 번 쓰면 컴파일러가 이름이 겹친다고 멈춥니다. 배열 요소를 하나로 통일하거나 루트 이름에 접미어를 붙여 이름이 달라지게 하세요.
최상위 키가 영문자가 아니면 어떻게 되나요?
영문자와 숫자를 제외한 문자는 지워집니다. 이름이 전부 사라지면 자리표시자로 쓰입니다. 그래도 필드 이름 자체는 원래대로 유지돼요.
알아둘 경계값
- 객체 배열이면 인터페이스가 나오고 숫자나 문자 배열이면 별칭이 나와요. 받는 쪽 선언 방식에 맞는지 먼저 보세요.
- 최상위가 값 하나뿐이면 결과가 빈 채로 나와요. 숫자나 문자열 하나를 넣었다면 객체로 감싸서 넣으세요.
- 안쪽 인터페이스가 먼저 나오고 루트가 맨 마지막에 나와요. 파일 맨 위에 루트를 두고 싶으면 순서를 바꾸세요.
- 날짜처럼 보이는 문자열도 문자열로만 나와요. 시간 계산이 필요하면 날짜형으로 따로 손보세요.
- 빈 객체는 필드 없는 빈 인터페이스가 돼요. 무엇이든 들어가는 것처럼 보이니 실제 필드로 좁혀 쓰세요.
- 주석이나 끝 쉼표가 든 표기는 바로 오류가 나요. 엄격한 제이슨 모양으로 먼저 다듬으세요.
결과를 믿기 전 확인 목록
- 최상위가 객체인지 배열인지 넣기 전에 보세요.
- 결과가 비어 있지 않은지 실행 뒤에 눈으로 보세요.
- 별칭과 인터페이스 중 나온 형태가 맞는 목적으인지 보세요.
- 날짜 필드는 날짜형으로 손보았는지 결과에서 보세요.
- 빈 인터페이스가 있으면 실제 필드로 좁혔는지 보세요.
- 입력에서 주석과 끝 쉼표를 미리 지웠는지 보세요.
- 루트 이름을 영문으로 지정했는지 입력 칸에서 보세요.
- 중첩 이름이 겹치면 컴파일 오류가 나는지 붙여넣어 보세요.
- 배열 원소 모양이 제각각이면 표본을 통일했는지 보세요.
자주 묻는 질문
배열 안 객체가 다르면?
합집합 유니온 타입으로 추론합니다.
선택적 필드도 표시되나요?
배열 안에서 일부 객체에만 있는 키는 유니온 타입으로 추론해요. 필수/선택 구분은 생성 후 직접 조정하세요.