MYMONDAY.ai
MYMONDAY.ai
서비스스튜디오도구데이터·포맷73CSS 생성기19색상·이미지10인코딩·보안10웹·SEO11개발·데브옵스10파일·내보내기18계산기6가이드

XML TypeScript 인터페이스 생성기

샘플 XML을 변환된 데이터를 설명하는 TypeScript 인터페이스 또는 타입 별칭으로 바꿉니다.

  • 브라우저에서 처리
  • 가입 없음
  • 무료

도구 작업 공간

예제

옵션

선언 방식
알 수 없는 값

XML → 데이터 매핑

속성은 이 문자로 시작하는 키가 되어 id="1"은 @id가 됩니다. 비우면 속성 이름 그대로 씁니다.

속성이나 자식 요소와 함께 있는 텍스트는 이 키에 담습니다.

끄면 <item>이 하나일 땐 객체, 여러 개일 땐 배열이 됩니다. 켜면 개수와 상관없이 구조가 같습니다.

끄면 모든 값이 문자열로 남습니다. 켜면 true/false, 정수, 소수는 해당 타입이 되고 007이나 긴 ID는 문자열로 둡니다.

XML 입력

21줄491byte

결과

⌘/Ctrl + Enter로 복사
결과 · ApiResponse.ts
export interface ApiResponse {
  order: ApiResponseOrder;
}

export interface ApiResponseOrder {
  "@id": number;
  "@status": string;
  customer: ApiResponseOrderCustomer;
  items: ApiResponseOrderItems;
  total: number;
  shipped_at: string;
  tracking: string;
}

export interface ApiResponseOrderCustomer {
  "@id": number;
  "@vip": boolean;
  name: string;
  email: string;
}

export interface ApiResponseOrderItems {
  item: ApiResponseOrderItemsItem[];
}

export interface ApiResponseOrderItemsItem {
  "@sku": string;
  "@qty": number;
  name: string;
  price: number;
}
타입5
크기580byte

이 생성기는 샘플 XML에 대한 TypeScript 타입을 씁니다. XML 변환기들이 공유하는 규칙으로 XML을 데이터로 매핑하고, 타입은 XML to JSON 변환기가 출력하는 것과 같은 그 데이터를 설명합니다. 속성이나 자식이 있는 요소마다 export interface가 만들어지며 원하면 type 별칭으로 바꿀 수 있습니다.

TypeScript는 어떤 문자열이든 프로퍼티 이름으로 쓸 수 있어 이름이 바뀌는 것은 없습니다. 속성은 따옴표 친 키 "@id", 텍스트 키는 "#text", xml:lang 같은 키도 따옴표로 감쌉니다. 올바른 식별자인 이름은 따옴표 없이 둡니다. 타입은 파싱된 데이터를 설명할 뿐 XML DOM이 아니며 출력에 런타임 코드는 없습니다.

입력은 엄격한 XML 1.0 파서가 읽고 오류에는 정확한 행과 열이 표시되며 20 MiB까지 받고 업로드하지 않습니다.

사용 방법

  1. XML 붙여넣기

    문서를 붙여 넣거나 예제를 엽니다. 입력하는 대로 타입이 갱신됩니다.

  2. 매핑 설정

    TypeScript 옵션 아래의 XML 데이터 매핑 패널에서 속성 접두사와 텍스트 키를 고르고 항상 배열, 숫자 추론 여부를 정합니다. 추론을 끄면 모든 말단이 string입니다.

  3. TypeScript 옵션 정하기

    루트 이름(기본 ApiResponse), interface 또는 type 별칭, readonly 프로퍼티, 타입을 알 수 없는 값에 쓸 unknown 또는 any를 고릅니다.

  4. 타입 읽기

    루트가 먼저, 중첩 타입이 뒤따릅니다. 일부 발생에만 있는 키는 key?: T로 적힙니다.

  5. 복사 또는 다운로드

    코드를 복사하거나 루트 이름의 ApiResponse.ts로 내려받습니다.

작동 원리

XML 값과 TypeScript 타입

정수와 소수는 모두 number 하나로 표현합니다. 텍스트, CDATA, 빈 요소는 string이고, 007이나 2^53을 넘는 ID처럼 추론 규칙을 통과하지 못한 값도 string입니다.

XMLTypeScript
<name>Ada</name>name: string
id="7""@id": number
<price>19.5</price>price: number
<ok>true</ok>ok: boolean
속성 옆의 텍스트"#text": string
반복되는 <item>item: ApiResponseItem[]
일부 item에만 있는 키"@qty"?: number
<v>1</v><v>a</v>v: (string | number)[]

선택 키와 유니온

반복 요소의 모든 발생이 합쳐집니다. 인터페이스는 키의 합집합을 갖고, 일부에서 빠진 키는 ?가 붙은 선택 키가 됩니다. 한 위치의 값 종류가 다르면 (string | number)[] 같은 유니온이 됩니다.

readonly 옵션은 모든 프로퍼티에 readonly를 붙이고, type 별칭 방식은 인터페이스 대신 export type X = { ... };을 씁니다. 속성 접두사를 빈 문자열로 하면 평범한 속성 이름이 올바른 식별자가 되어 따옴표가 사라집니다.

export interface ApiResponseOrderItem {
  "@sku": string;
  "@qty"?: number;
  "#text": string;
}

자식 하나일 때와 배열

<item>이 하나면 객체, 둘이면 Item[]로 타입이 잡혀서, 항목이 하나뿐인 샘플은 배열이라는 사실을 숨깁니다. 자식 요소는 항상 배열로 옵션을 켜면 모든 자식을 배열로 타입하므로 실제 데이터의 개수가 달라져도 안전합니다.

실제 예시

반복 항목이 있는 주문
입력
<order id="1042"><item sku="A1" qty="1">Pen</item><item sku="B7">Ink</item></order>
출력
export interface ApiResponse {
  order: ApiResponseOrder;
}

export interface ApiResponseOrder {
  "@id": number;
  item: ApiResponseOrderItem[];
}

export interface ApiResponseOrderItem {
  "@sku": string;
  "@qty"?: number;
  "#text": string;
}

두 item 요소가 인터페이스 하나를 공유합니다. "@qty"는 첫 item에만 있어 선택 키이고, 속성 키는 @ 접두사와 함께 따옴표로 남습니다.

빈 속성 접두사, type 별칭, readonly
입력
<order id="1042"><item sku="A1" qty="1">Pen</item><item sku="B7">Ink</item></order>
출력
export type ApiResponse = {
  readonly order: ApiResponseOrder;
};

export type ApiResponseOrder = {
  readonly id: number;
  readonly item: ApiResponseOrderItem[];
};

export type ApiResponseOrderItem = {
  readonly sku: string;
  readonly qty?: number;
  readonly "#text": string;
};

접두사가 없으면 id, sku, qty는 올바른 식별자가 되어 따옴표가 사라지고 "#text"만 남습니다. 선언은 readonly 멤버를 가진 type 별칭입니다.

한 이름에 섞인 종류
입력
<r><v>1</v><v>a</v></r>
출력
export interface ApiResponse {
  r: ApiResponseR;
}

export interface ApiResponseR {
  v: (string | number)[];
}

같은 요소 이름 아래의 숫자와 단어는 any가 아니라 (string | number)[] 유니온이 됩니다.

자주 하는 실수

  • 이름이 같은 속성과 자식 요소

    속성 접두사가 비어 있으면 속성 id와 자식 요소 <id>가 같은 키에 놓여 리스트로 합쳐집니다. 이름이 겹칠 수 있다면 접두사를 두세요.

  • 정수처럼 보이는 소수

    19.0은 19로 읽혀도 여전히 number이지만 원래 텍스트의 자릿수는 사라집니다. 정확한 텍스트가 중요하면 추론을 끄세요.

  • 타입은 검증이 아닙니다

    이 인터페이스는 실행 시점에는 사라집니다. 신뢰할 수 없는 데이터라면 zod 같은 스키마 라이브러리로 파싱된 데이터를 검증하세요.

  • 항목 하나는 배열을 가립니다

    <item>이 하나뿐인 문서는 item을 객체로 타입하고, 그에 맞춰 쓴 코드는 item이 둘인 다음 문서에서 깨집니다. 항상 배열 옵션을 일찍 켜 두세요.

자주 묻는 질문

interface와 type 별칭 중 무엇이 좋을까요?

둘 다 같은 모양을 설명합니다. 선언 방식 옵션에서 병합과 확장이 쉬운 interface를 고르거나, 스타일 가이드가 별칭을 요구하면 type을 고르세요.

왜 일부 키에만 따옴표가 있나요?

@id, #text, xml:lang은 올바른 식별자가 아니라서 따옴표로 감쌉니다. customer 같은 평범한 이름은 감싸지 않습니다.

unknown과 any 중 무엇을 쓸까요?

XML에서는 null이 나오지 않아 알 수 없는 값 옵션이 적용되는 일은 드뭅니다. 쓸 만한 타입이 없는 위치에서 unknown은 사용 전에 검사를 강제하고 any는 그렇지 않습니다.

@ 키 없이 타입을 얻을 수 있나요?

네. 매핑 패널에서 속성 접두사를 빈 문자열로 하면 속성이 평범한 키가 됩니다.

이 타입이 XML DOM을 설명하나요?

아니요. XML to JSON 매핑이 만든 객체, 곧 그 출력을 JSON.parse한 결과를 설명합니다.

XML이 업로드되나요?

아니요. 파싱과 생성이 페이지 안에서 실행되고 문서는 기기에 남습니다.

마지막 업데이트:

이 도구와 함께 자주 쓰는 도구입니다.

데이터·포맷 더 보기
JSON 포매터JSON을 정렬·검증·압축하고 오류 위치를 정확히 짚어줍니다.XML 포매터파서가 깨지기 전에 XML을 들여쓰고 검증합니다.YAML 포매터YAML을 검증하고 들여쓰기·타입 함정을 잡아냅니다.CSV 뷰어·프로파일러가져오기 전에 열·타입·빈칸·중복을 한눈에 봅니다.JSONPath 테스터JSONPath로 JSON을 질의하고 결과를 즉시 확인합니다.JSON → Zod 스키마JSON 샘플을 바로 쓰는 Zod 스키마로 바꿉니다.