JSON to TypeScript - 인터페이스 및 타입 생성 온라인

JSON을 붙여넣으면 TypeScript 인터페이스, 타입, enum을 즉시 생성. API 응답을 타입 안전한 코드로 변환 — 100% 브라우저 처리.

자주 묻는 질문

JSON to TypeScript 변환기란 무엇인가요?

JSON to TypeScript 변환기는 JSON 데이터에서 TypeScript 인터페이스 또는 타입 별칭을 자동으로 생성하는 도구입니다. API 응답이나 설정 파일의 타입 정의를 수동으로 작성하는 대신, 샘플 JSON 객체를 붙여넣으면 중첩 객체, 배열, null 값을 포함한 모든 필드에 대해 올바른 TypeScript 타입을 추론합니다.

JSON에서 TypeScript 인터페이스를 어떻게 생성하나요?

왼쪽 입력 필드에 JSON 데이터를 붙여넣기만 하면 됩니다. 도구가 오른쪽 출력 패널에 TypeScript 인터페이스를 즉시 생성합니다. 루트 인터페이스 이름 설정, 'interface'와 'type' 구문 선택, 'export' 키워드 토글 등 다양한 옵션으로 출력을 커스터마이즈할 수 있습니다. 만족스러우면 '복사'를 클릭하여 클립보드에 복사하세요.

TypeScript interface와 type alias 중 어떤 것을 사용해야 하나요?

둘 다 객체 형태를 정의하는 데 사용할 수 있지만 차이점이 있습니다. Interface는 'extends'로 확장하고 선언 병합이 가능하므로 일반적으로 객체 정의에 선호됩니다. Type alias는 유니온, 인터섹션, 원시 타입을 표현할 수 있어 더 다재다능합니다. 공개 API 계약에는 interface를, 복잡한 타입 조합에는 type alias를 사용하세요.

변환기가 중첩된 JSON 객체를 어떻게 처리하나요?

도구가 중첩 객체를 만나면 별도의 명명된 인터페이스를 생성합니다. 예를 들어, JSON에 'address' 하위 객체가 있는 'user' 객체가 있으면 'User' 인터페이스와 'Address' 인터페이스를 모두 생성합니다. 옵션에서 '인라인 중첩 타입'을 선택하면 별도의 인터페이스 대신 부모 인터페이스 내에 직접 정의할 수도 있습니다.

이 도구를 사용할 때 JSON 데이터가 안전한가요?

네, 완전히 안전합니다. 이 도구는 클라이언트 사이드 JavaScript를 사용하여 브라우저에서 모든 것을 처리합니다. JSON 데이터는 절대 컴퓨터를 떠나지 않습니다 - 서버 업로드, API 호출, 데이터 저장이 없습니다. 이로 인해 민감한 API 응답, 독점 데이터 스키마, 기밀 설정 파일에도 안전하게 사용할 수 있습니다.

도구가 JSON의 null 값을 어떻게 처리하나요?

JSON 필드에 null 값이 있으면 'field?: string | null'과 같이 null과의 유니온 타입을 생성합니다. '?' 수정자로 선택적 속성으로 표시됩니다. 이를 통해 TypeScript 타입이 데이터의 null 가능 특성을 정확하게 나타냅니다.

혼합 타입을 포함하는 배열은 어떻게 처리되나요?

JSON 배열에 다른 타입의 요소(예: 문자열과 숫자)가 포함되어 있으면 '(string | number)[]'와 같은 유니온 배열 타입을 생성합니다. 다른 형태의 객체 배열의 경우 선택적 속성을 가진 단일 인터페이스로 병합합니다. 빈 배열은 'unknown[]'으로 타입이 지정됩니다.

코드 예제

// JSON to TypeScript interface generator
function jsonToTypeScript(json, rootName = 'Root') {
  const interfaces = [];

  function inferType(value, name) {
    if (value === null) return 'null';
    if (Array.isArray(value)) {
      if (value.length === 0) return 'unknown[]';
      const types = [...new Set(value.map((item) => inferType(item, name + 'Item')))];
      const typeStr = types.length > 1 ? `(${types.join(' | ')})` : types[0];
      return `${typeStr}[]`;
    }
    if (typeof value === 'object') {
      const interfaceName = toPascalCase(name);
      const properties = Object.entries(value).map(([key, val]) => {
        const type = inferType(val, key);
        const optional = val === null ? '?' : '';
        return `  ${key}${optional}: ${type};`;
      });
      interfaces.push(`interface ${interfaceName} {\n${properties.join('\n')}\n}`);
      return interfaceName;
    }
    return typeof value;
  }

  function toPascalCase(str) {
    return str.replace(/(^|[-_ ])(\w)/g, (_, __, c) => c.toUpperCase());
  }

  const parsed = JSON.parse(json);
  inferType(parsed, rootName);
  return interfaces.reverse().join('\n\n');
}

const json = '{"name": "Alice", "age": 30, "address": {"city": "NYC"}}';
console.log(jsonToTypeScript(json));