[TypeScript] 객체 타입: 객체를 보호하는 강력한 방패 🛡️

타입스크립트의 객체 타입 톺아보기! 🛡️

TypeScript에서 객체 타입은 코드의 안정성과 가독성을 보장하는 데 중요한 역할을 합니다. 객체는 자바스크립트에서 가장 기본적인 데이터 구조 중 하나지만, 동적 타입 시스템에서는 실수가 잦죠. TypeScript를 활용하면 객체에 대해 명확하고 안전한 구조를 정의할 수 있습니다. 이번 글에서는 객체 타입의 기본 개념부터 활용까지 차근차근 파헤쳐 보겠습니다.

---

1. 객체 타입이란? 🖍️

객체 타입은 객체의 속성 이름과 속성 타입을 정의하여 객체의 구조를 미리 고정하는 역할을 합니다. TypeScript는 이를 통해 객체의 형태를 검사하고, 잘못된 속성 접근을 사전에 방지합니다.

 

1.1 기본 객체 타입 선언

객체 타입은 중괄호 {}를 사용해 정의합니다.

let user: { name: string; age: number };

user = { name: "Alice", age: 25 }; // ✅ 올바른 객체
user = { name: "Bob" };            // ❌ 오류: age 속성이 누락
user = { name: "Charlie", age: "25" }; // ❌ 오류: age는 number 타입이어야 함

---

2. 객체 타입의 확장과 활용 🧮

2.1 옵셔널 속성

모든 속성이 항상 필요한 것은 아닙니다. 옵셔널 속성은 ?를 사용해 선언합니다.

type User = {
  name: string;
  age?: number; // age는 있어도 되고 없어도 되는 속성
};

let user1: User = { name: "Alice" };         // ✅ age 없음
let user2: User = { name: "Bob", age: 30 };  // ✅ age 있음

 

2.2 읽기 전용 속성

객체의 속성을 읽기 전용(readonly)으로 만들어 값 변경을 방지할 수 있습니다.

type User = {
  readonly id: number; // 수정 불가
  name: string;
};

let user: User = { id: 1, name: "Alice" };
user.name = "Bob";  // ✅ 수정 가능
user.id = 2;        // ❌ 오류: id는 읽기 전용

 

2.3 인덱스 시그니처

속성 이름이 미리 정해져 있지 않은 경우, 인덱스 시그니처를 사용해 동적 속성을 정의할 수 있습니다.

type Dictionary = {
  [key: string]: string; // 모든 속성 이름은 string, 값도 string
};

let translations: Dictionary = {
  hello: "안녕하세요",
  goodbye: "안녕히 가세요",
};

translations.welcome = "환영합니다"; // ✅ 동적 속성 추가

 

2.4 객체 타입의 재사용: 타입 별칭과 인터페이스

 

객체 타입을 여러 곳에서 재사용하고 싶다면 타입 별칭이나 인터페이스를 사용합니다.

 

타입 별칭

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

let user: User = { name: "Alice", age: 25 };

 

인터페이스

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

let user: User = { name: "Bob", age: 30 };

 

2.5 타입 확장

타입 확장을 통해 기존 객체 타입을 확장할 수 있습니다.

 

인터페이스 확장

interface User {
  name: string;
}

interface Admin extends User {
  role: string;
}

let admin: Admin = { name: "Alice", role: "Administrator" };

 

교차 타입(Intersection Types)

& 연산자를 사용해 두 타입을 합칠 수 있습니다.

type User = { name: string };
type Admin = User & { role: string };

let admin: Admin = { name: "Bob", role: "Moderator" };

---

3. 객체 타입과 유틸리티 타입 🔖

TypeScript는 객체 타입을 변형하거나 다루기 위한 유틸리티 타입을 제공합니다.

 

3.1 Partial

모든 속성을 선택적으로 만듭니다.

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

let partialUser: Partial<User> = { name: "Alice" }; // age는 생략 가능

 

3.2 Required

모든 속성을 필수로 만듭니다.

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

let requiredUser: Required<User> = { name: "Bob", age: 25 }; // 모든 속성 필요

 

3.3 Readonly

모든 속성을 읽기 전용으로 만듭니다.

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

let readonlyUser: Readonly<User> = { name: "Alice", age: 30 };
readonlyUser.name = "Bob"; // ❌ 오류

 

3.4 Record

키와 값을 한꺼번에 정의합니다.

type Role = "admin" | "user" | "guest";
type Permissions = Record<Role, string>;

let permissions: Permissions = {
  admin: "all-access",
  user: "read-write",
  guest: "read-only",
};

---

4. 객체 타입에서 마주치는 흔한 에러

4.1 속성 누락 오류

type User = { name: string; age: number };
let user: User = { name: "Alice" }; // ❌ age 속성 누락

 

해결 방법: 옵셔널 속성을 사용하거나 타입 정의를 수정하세요.

 

4.2 잘못된 속성 추가

type User = { name: string; age: number };
let user: User = { name: "Bob", age: 30, role: "admin" }; // ❌ role 속성은 정의되지 않음

 

해결 방법: 인덱스 시그니처를 추가하거나 타입 정의를 수정하세요.

 

4.3 읽기 전용 속성 수정

type User = { readonly id: number; name: string };
let user: User = { id: 1, name: "Alice" };
user.id = 2; // ❌ 읽기 전용 속성 수정 시도

 

해결 방법: 읽기 전용 속성을 수정하려면 다른 객체를 생성해야 합니다.

---

마무리: 객체 타입으로 더 안전한 코드를 📑

TypeScript의 객체 타입은 자바스크립트 객체의 자유로움을 안전하게 통제하는 강력한 도구입니다. 다양한 속성 제어 방식과 유틸리티 타입을 활용하면 코드의 가독성과 안정성이 비약적으로 향상됩니다. 객체 타입을 제대로 이해하고 사용해, 더 깨끗하고 오류 없는 코드를 만들어 봅시다!

 

🌷전설의 개발자가 되어봅시당! 🌷