FrontEND/vue

TypeScript에서 객체를 안전하게 초기화하는 방법

mingmingIT 2025. 4. 28. 10:35

TypeScript를 쓰다 보면 객체 타입을 선언해놓고도 다음과 같은 오류를 겪는 경우가 많습니다.

Cannot read property 'name' of undefined

또는…

Object is possibly 'undefined'.

이런 상황을 피하기 위해, 객체를 명확하게 초기화하고, 선택적 접근 및 기본값을 설정하는 방식을 제대로 이해하는 것이 중요합니다.


1. 객체 타입 선언 시 기본값으로 초기화하기

interface User {
  id: number
  name: string
}

let user: User = {
  id: 0,
  name: ''
}

초기값을 명확히 주는 것은 가장 기본적이고 안정적인 방식입니다.


2. Partial<T>로 부분 초기화 + 타입 캐스팅

Partial<T>는 모든 필드를 optional로 바꿔줍니다. 초기화는 유연하지만 런타임에서 안전성 주의가 필요합니다.

interface User {
  id: number
  name: string
}

let user: Partial<User> = {}
user.name = 'Alice'

또는 강제로 타입을 덮어쓸 수 있습니다:

let user = {} as User

💡 이 방법은 에러는 없지만, 타입 안정성이 낮아지기 때문에 최소한으로만 사용하는 게 좋습니다.


3. 옵셔널 체이닝 + Null 병합 연산자 조합

객체의 속성 접근 시 **옵셔널 체이닝 (?.)**과 **null 병합 연산자 (??)**를 함께 사용하면 런타임 에러 없이 안전하게 처리할 수 있습니다.

console.log(user?.name ?? '이름 없음')
  • user가 undefined면 ?? 이후 값으로 대체
  • user.name이 없으면 안전하게 기본값 출력

4. 객체를 팩토리 함수로 안전하게 생성하기

객체 초기값을 일관되게 유지하기 위해 팩토리 함수를 사용하는 방식도 좋습니다.

function createDefaultUser(): User {
  return {
    id: 0,
    name: '게스트'
  }
}

let user = createDefaultUser()

5. null / undefined 체크 후 초기화

외부 API 호출 후 받는 데이터가 undefined일 수 있으므로, 초기화 여부를 체크한 후 안전하게 처리합니다.

let user: User | undefined

if (!user) {
  user = { id: -1, name: '알 수 없음' }
}

또는 더 간단하게:

user = user ?? { id: -1, name: '알 수 없음' }

정리

전략 설명 사용 예
명시적 초기값 객체 선언 시 바로 초기화 let user: User = { id: 0, name: '' }
Partial<T> 부분 초기화 허용 let user: Partial<User> = {}
옵셔널 체이닝 + ?? 안전한 접근 + 기본값 user?.name ?? '게스트'
팩토리 함수 일관된 초기값 제공 createDefaultUser()
조건부 초기화 값이 없을 때만 초기화 user = user ?? { ... }

결론

TypeScript에서 객체를 안전하게 다루는 건 단순한 습관 이상의 의미가 있습니다.
초기화 전략만 잘 세워도, 예상치 못한 undefined 에러를 대부분 방지할 수 있고,
리팩터링과 유지보수가 훨씬 쉬운 코드를 만들 수 있습니다.

객체 초기화는 “에러를 막기 위한 소극적 대응”이 아니라, “안정성과 명확함을 높이는 적극적인 개발 전략”입니다.