JSON to TypeScript 변환기는 JSON 데이터를 TypeScript 인터페이스나 타입으로 자동 변환하는 도구입니다. 📝 기본 사용법 • 왼쪽 입력창에 JSON 데이터를 붙여넣으세요 • 루트 타입명을 입력하세요 (기본값: RootObject) • 원하는 옵션을 선택하세요 • "생성" 버튼을 클릭하면 TypeScript 코드가 생성됩니다 • 오른쪽 출력창에서 결과를 확인하고 복사할 수 있습니다 ⚙️ 옵션 설명 1️⃣ Root Type Name • 생성될 최상위 타입의 이름을 지정합니다 • PascalCase로 입력하는 것이 권장됩니다 • 예: User, ApiResponse, ProductData 2️⃣ Use Type Instead of Interface • OFF: interface 키워드 사용 (기본값) • ON: type 키워드 사용 • 예: interface User {...} vs type User = {...} 3️⃣ Optional Properties • OFF: 모든 속성이 필수 (property: type) • ON: 모든 속성이 선택적 (property?: type) • API 응답 데이터 등에서 유용합니다 4️⃣ Readonly Properties • OFF: 일반 속성 (기본값) • ON: 읽기 전용 속성 (readonly property: type) • 불변 데이터 구조에 유용합니다 🔧 추가 기능 JSON 포맷팅 • "FORMAT JSON" 버튼으로 입력한 JSON을 정돈할 수 있습니다 • 들여쓰기가 올바르게 적용됩니다 • JSON 유효성 검사도 함께 수행됩니다 자동 타입 감지 • number, string, boolean 기본 타입 자동 감지 • 배열의 경우 요소 타입 자동 추론 • null 값은 null 타입으로 처리 • 중첩 객체는 별도 interface/type으로 분리 중첩 구조 처리 • 깊이에 관계없이 모든 중첩 객체를 처리합니다 • 각 객체는 속성명 기반으로 PascalCase 타입명 생성 • 예: address → Address, userProfile → UserProfile 배열 타입 처리 • 빈 배열: any[] • 단일 타입 배열: string[], number[] 등 • 혼합 타입 배열: (string | number)[] • 객체 배열: CustomType[] 💡 사용 팁 1. API 응답 타입 생성 • API 응답 JSON을 복사해서 붙여넣기 • Optional 옵션 활성화 (일부 필드가 없을 수 있음) • 적절한 타입명 지정 (예: UserResponse) 2. Mock 데이터에서 타입 추출 • 테스트 데이터나 샘플 JSON 사용 • 실제 프로젝트에 타입 정의 복사 3. 데이터베이스 스키마 변환 • JSON 형식의 DB 레코드를 TypeScript 타입으로 • Readonly 옵션으로 불변 모델 생성 4. 설정 파일 타입 정의 • config.json 등의 설정 파일을 타입으로 변환 • 타입 안전성 확보

TypeScript는 JavaScript에 정적 타입을 추가한 프로그래밍 언어입니다. 타입 시스템을 통해 코드의 안정성과 가독성을 높일 수 있습니다. 📖 Interface vs Type Interface • 객체의 구조를 정의하는 주요 방법 • 선언 병합(Declaration Merging) 가능 • extends로 확장 가능 • 클래스 구현 시 사용 • 주로 객체 타입 정의에 사용 Type • 더 유연한 타입 정의 방법 • Union, Intersection 등 고급 타입 지원 • 원시 타입, 튜플, 함수 타입 등 모두 정의 가능 • 선언 병합 불가능 • Mapped Types, Conditional Types 등에 필수 선택 기준 • 객체 구조 정의: interface 권장 • Union/Intersection: type 필수 • 확장 가능성 필요: interface • 복잡한 타입 조작: type 🔧 Optional Properties (?) 선택적 속성은 있어도 되고 없어도 되는 속성을 의미합니다. interface User { name: string; // 필수 email?: string; // 선택적 } // 둘 다 유효 const user1: User = { name: "Alice" }; const user2: User = { name: "Bob", email: "[email protected]" }; 활용 사례 • API 응답에서 일부 필드가 없을 수 있을 때 • 함수 매개변수의 선택적 옵션 • 폼 데이터의 선택 입력 필드 🔒 Readonly Properties 읽기 전용 속성은 생성 후 수정할 수 없는 속성입니다. interface Config { readonly apiKey: string; readonly timeout: number; } const config: Config = { apiKey: "abc123", timeout: 5000 }; // config.apiKey = "new"; // 오류! 활용 사례 • 설정 객체 (변경되면 안 되는 값) • 불변 데이터 구조 • 함수 인자 보호 (의도치 않은 수정 방지) 📦 타입 추론과 검증 TypeScript는 컴파일 시점에 타입을 검증합니다: 1. 잘못된 속성 접근 방지 2. 오타 자동 감지 3. 자동완성 지원 4. 리팩토링 안전성 향상 5. 런타임 오류 사전 방지 🎯 실무 활용 1. API 응답 타입 fetch('/api/user') .then(res => res.json()) .then((data: UserResponse) => { // data는 타입 안전! }); 2. Props 타입 정의 (React) interface ButtonProps { label: string; onClick: () => void; disabled?: boolean; } 3. 데이터 모델 interface Product { readonly id: number; name: string; price: number; category?: string; } 4. 설정 객체 type Config = { readonly apiUrl: string; readonly timeout: number; retries?: number; } ⚠️ 주의사항 • readonly는 컴파일 타임에만 적용됨 (런타임 아님) • 타입은 JavaScript로 변환 시 제거됨 • any 타입 남용 금지 (타입 안정성 상실) • 너무 복잡한 타입은 가독성 저하

💡 TypeScript 타입 정의 가이드 1. API 응답 타입 생성 워크플로우 ① Postman/curl로 API 호출하여 실제 응답 받기 ② 응답 JSON을 복사 ③ JSON to TypeScript 변환기에 붙여넣기 ④ Optional 옵션 활성화 (일부 필드 누락 가능성) ⑤ 적절한 타입명 입력 (예: GetUserResponse) ⑥ 생성된 TypeScript 코드를 프로젝트에 복사 예시: // types/api.ts export interface GetUserResponse { id?: number; name?: string; email?: string; } 2. 중첩 구조 최적화 복잡한 JSON의 경우 자동 생성된 타입명을 더 의미있게 수정하세요. 자동 생성: interface Address { ... } interface UserProfile { ... } 수동 최적화: interface UserAddress { ... } interface UserProfileData { ... } 3. 배열 데이터 처리 최소 1개 이상의 요소가 있는 배열로 테스트하세요. 빈 배열은 any[]로 생성됩니다. 나쁜 예: { "items": [] } // any[] 생성 좋은 예: { "items": [{ "id": 1, "name": "test" }] } // Item[] 생성 4. Union 타입 활용 같은 필드가 여러 타입일 수 있는 경우: 입력: { "value": "text" } { "value": 123 } → 각각 변환 후 수동으로 Union 타입 생성: type Value = string | number; 5. Enum 변환 특정 값만 허용하는 경우 변환 후 Enum으로 수동 변경: 자동 생성: interface Status { status: string; } 수동 최적화: enum StatusEnum { Active = "active", Inactive = "inactive" } interface Status { status: StatusEnum; } 6. Generic 타입 활용 공통 구조를 가진 여러 타입의 경우: 자동 생성: interface UserResponse { data: User; } interface ProductResponse { data: Product; } 수동 최적화: interface ApiResponse<T> { data: T; } type UserResponse = ApiResponse<User>; type ProductResponse = ApiResponse<Product>; 7. Utility Types 조합 TypeScript 내장 Utility Types와 조합: 기본: interface User { id: number; name: string; email: string; } 응용: type UserInput = Omit<User, 'id'>; // id 제외 type PartialUser = Partial<User>; // 모든 속성 optional type ReadonlyUser = Readonly<User>; // 모든 속성 readonly 8. 실시간 검증 개발 중에는 실제 데이터로 계속 테스트하세요: ① API 응답 로깅 ② JSON 복사 ③ 타입 재생성 ④ 타입 불일치 확인 9. 주석 추가 생성된 타입에 JSDoc 주석 추가: interface User { /** 사용자 고유 ID */ id: number; /** 사용자 이름 (2-50자) */ name: string; } 10. 파일 구조 관리 // types/ // ├── api/ // │ ├── user.ts // │ └── product.ts // ├── models/ // │ └── domain.ts // └── index.ts (re-export) 11. Strict 모드 활용 tsconfig.json: { "compilerOptions": { "strict": true, "strictNullChecks": true } } 12. 타입 가드 구현 런타임 타입 검증: function isUser(obj: any): obj is User { return typeof obj.id === 'number' && typeof obj.name === 'string'; }