본문 바로가기

프로그래밍기초/typescript

#05 TypeScript - 객체

객체

TypeScript에서 객체는
키(key)와 값(value)의 쌍으로 구성된 구조화된 데이터 타입이다.

const user = {
  id: 1,
  name: "Kim"
};
  • 배열과 달리 각 프로퍼티에 의미 있는 이름을 가진다.
  • 실무에서 데이터 모델, DTO, 상태 객체 등에 핵심적으로사용된다.

 

1. 객체 타입 정의 방법

1) 인라인 객체 타입

let user: { id: number; name: string } = {
  id: 1,
  name: "Kim"
};
  • 간단한 경우에 적합
  • 재사용성은 낮음

2) type 별칭 사용

type User = {
  id: number;
  name: string;
};

let user: User = {
  id: 1,
  name: "Kim"
};
  • 가장 일반적인 방식
  • 재사용성과 가독성이 높음

3) interface 사용

interface User {
  id: number;
  name: string;
}
  • 객체 구조를 정의하는 데 특화
  • 선언 병합 가능 (라이브러리 타입 확장에 유리)

 

2. 객체 타입의 핵심 특징

1) 프로퍼티 타입 강제

type User = {
  id: number;
  name: string;
};

user.id = "1"; // ❌ 에러
  • 잘못된 데이터 구조를 컴파일 단계에서 차단

2) 초과 프로퍼티 검사

type User = {
  id: number;
  name: string;
};

const user: User = {
  id: 1,
  name: "Kim",
  age: 20 // ❌ 에러
};
  • 객체 리터럴에만 엄격하게 적용됨
  • 실수 방지 목적

 

3. 선택적 프로퍼티 (Optional)

type User = {
  id: number;
  name?: string;
};

const user1: User = { id: 1 };
  • ?는 있어도 되고 없어도 됨을 의미
  • 사용 시 undefined 가능성 고려 필요

 

4. readonly 프로퍼티

type User = {
  readonly id: number;
  name: string;
};

user.id = 2; // ❌ 에러
  • 객체의 특정 속성을 변경 불가로 설정
  • 불변 객체 설계에 중요

 

5. 인덱스 시그니쳐

동적 키를 허용하는 객체에 사용한다.

[key: key의타입] : value의 타입; 으로 type을 만든다.

// 1.
type Score = {
  [key: string]: number;
};

const scores: Score = {
  math: 90,
  eng: 80
};

const scores2: Score = {}; // 이렇게해도 에러발생 안한다.


// 2.
type Code = {
  [key: string]: number;
  Korea: number;
}

// let v1: Code = {}; //error
let v2: Code = {Korea: 1}; // Code에서 선언된 Korea를 반드시 써줘야한다.

// 3.
type Code2 = {
  [key: string]: number;
  Korea: string; // error: 인덱스시그니처 number와 일치하거나 호환되어야한다.
}
  • 모든 값의 타입이 동일해야 함
  • 지나친 사용은 타입 안정성 저하 가능

 

6. 객체와 구조 분해 할당

type User = {
  id: number;
  name: string;
};

const user: User = { id: 1, name: "Kim" };

const { id, name } = user;
// id: number
// name: string
  • 각 변수의 타입이 자동 추론됨

 

7. 객체 타입 확장

1) 상속 (extends)

type BaseUser = {
  id: number;
};

type Admin = BaseUser & {
  role: "admin";
};

또는

interface BaseUser {
  id: number;
}

interface Admin extends BaseUser {
  role: "admin";
}

 

 

 

반응형