Typescript json object 변환

by

TypeScript에서 JSON을 객체(Object)로 변환하는 방법은 여러 가지가 있습니다. 아래는 대표적인 예제 코드입니다.

📌 1. 기본적인 JSON 변환 (JSON.parse())

TypeScript에서 JSON을 객체로 변환할 때 가장 기본적인 방법은 JSON.parse()를 사용하는 것입니다.

const jsonString = `{
  "name": "홍길동",
  "age": 30,
  "email": "hong@example.com"
}`;

// JSON을 객체로 변환
const user: { name: string; age: number; email: string } = JSON.parse(jsonString);

console.log(user.name);  // 홍길동
console.log(user.age);   // 30
console.log(user.email); // hong@example.com

✅ JSON.parse()를 사용하면 문자열을 JavaScript 객체로 변환할 수 있습니다.

📌 2. 타입을 지정하여 변환 (인터페이스 활용)

TypeScript에서는 interface 또는 type을 사용하여 JSON 구조를 명확하게 정의할 수 있습니다.

interface User {
  name: string;
  age: number;
  email: string;
}

const jsonString = `{
  "name": "김철수",
  "age": 25,
  "email": "chulsoo@example.com"
}`;

// JSON을 객체로 변환 후 타입 적용
const user: User = JSON.parse(jsonString);

console.log(user.name);  // 김철수
console.log(user.age);   // 25
console.log(user.email); // chulsoo@example.com

✅ 이 방법의 장점: 타입 검사를 통해 안정성을 높일 수 있음.

📌 3. as 키워드로 타입 단언 (Type Assertion)

TypeScript는 as 키워드를 사용하여 변환된 데이터의 타입을 지정할 수 있습니다.

type User = {
  name: string;
  age: number;
  email: string;
};

const jsonString = `{"name":"이영희","age":28,"email":"young@example.com"}`;

const user = JSON.parse(jsonString) as User;

console.log(user.name);  // 이영희
console.log(user.age);   // 28
console.log(user.email); // young@example.com

✅ as를 사용하면 타입 단언을 통해 변환된 객체가 특정 타입을 가질 것이라고 명확하게 지정할 수 있습니다.

📌 4. JSON 데이터에 대한 타입 검증 (Zod 라이브러리 활용)

JSON 데이터가 올바른지 검증하고 싶다면 Zod 같은 라이브러리를 사용할 수 있습니다.

1️⃣ Zod 설치

npm install zod

2️⃣ JSON 검증 예제

import { z } from "zod";

const UserSchema = z.object({
  name: z.string(),
  age: z.number(),
  email: z.string().email()
});

const jsonString = `{
  "name": "박지훈",
  "age": 32,
  "email": "jihoon@example.com"
}`;

try {
  const parsedData = JSON.parse(jsonString);
  const user = UserSchema.parse(parsedData); // 검증 후 객체 생성

  console.log(user.name);  // 박지훈
  console.log(user.age);   // 32
  console.log(user.email); // jihoon@example.com
} catch (error) {
  console.error("JSON 데이터가 유효하지 않습니다:", error);
}

✅ Zod를 사용하면 JSON 데이터가 정확한 타입을 따르는지 검사 가능!
✅ 잘못된 데이터가 들어오면 에러를 발생시켜 방지할 수 있음.

📌 정리

방법 설명 장점 단점
JSON.parse() 기본적인 변환 간단하고 빠름 타입 검사가 없음
interface 사용 명확한 타입 지정 타입 검사 가능 직접 정의해야 함
as 키워드 사용 타입 단언 코드 간결 타입 안정성이 낮음
Zod 라이브러리 사용 JSON 검증 및 변환 안전한 데이터 검증 외부 라이브러리 필요

Leave a Comment