[TypeScript] 제네릭(Generic) 기초부터 실무까지 정리

[TypeScript] 제네릭(Generic) 기초부터 실무까지 정리

TypeScript의 제네릭(Generic)은 코드의 유연성과 재사용성을 높여주는 강력한 기능입니다.
함수, 클래스, 인터페이스에서 다양한 타입을 다뤄야 할 때, 제네릭을 사용하면 코드 중복 없이 타입 안정성을 유지할 수 있습니다.

이 글에서는 제네릭의 기초 문법부터, 실무에서 자주 쓰이는 활용 예제까지 정리해드리겠습니다.

---

✅ 제네릭이란?

제네릭은 타입을 고정하지 않고, 사용할 때 지정할 수 있게 만드는 기능입니다.
기본 문법은 <T>를 사용하는 형태입니다.

// 제네릭 함수 예시
function identity<T>(value: T): T {
  return value;
}

// 사용 예
identity<string>("hello"); // "hello"
identity<number>(123);    // 123

→ 위 함수는 string, number, boolean 등 다양한 타입에 유연하게 대응할 수 있습니다.

---

✅ 제네릭 인터페이스

interface ApiResponse<T> {
  data: T;
  success: boolean;
  message?: string;
}

const userResponse: ApiResponse<{ name: string; age: number }> = {
  data: { name: "홍길동", age: 30 },
  success: true,
};

→ 제네릭 인터페이스는 API 응답, Form 구조 등 유형이 다양한 객체 정의에 유용합니다.

---

✅ 제네릭 클래스

class StorageBox<T> {
  private items: T[] = [];

  add(item: T) {
    this.items.push(item);
  }

  getAll(): T[] {
    return this.items;
  }
}

const stringBox = new StorageBox<string>();
stringBox.add("Hello");
stringBox.add("World");

const numbers = new StorageBox<number>();
numbers.add(10);
numbers.add(20);

→ StorageBox<T>는 문자열, 숫자 등 타입에 따라 다른 저장소를 만들 수 있습니다.

---

✅ 제네릭에 타입 제약 추가하기 (extends)

function getLength<T extends { length: number }>(value: T): number {
  return value.length;
}

getLength("hello");        // ✅
getLength([1, 2, 3]);       // ✅
getLength(123);            // ❌ 에러: number는 length 속성이 없음

→ extends를 사용하면 제네릭 타입이 어떤 속성을 반드시 가지고 있어야 한다는 제약을 줄 수 있습니다.

---

✅ 실무에서 많이 쓰는 제네릭 패턴

1. 유연한 유틸리티 함수 만들기

function getFirstItem<T>(arr: T[]): T | undefined {
  return arr[0];
}

2. 특정 키만 추출하기 (keyof 활용)

function getValue<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: "홍길동", age: 25 };
getValue(user, "name"); // "홍길동"

---

✅ 제네릭이 중요한 이유

• 타입 안정성과 유연성을 동시에 확보할 수 있음
• 코드 중복 없이 다양한 타입에 대응 가능
• 실무에서 API 응답, Form 처리, 상태관리 등에 광범위하게 활용됨

---

📌 마무리

TypeScript의 제네릭은 처음엔 어렵게 느껴질 수 있지만, 한 번 익혀두면 다양한 상황에서 코드를 깔끔하고 안정적으로 작성할 수 있게 됩니다.

앞으로 유틸리티 타입(Partial, Pick 등)과 함께 사용하는 패턴도 소개할 예정입니다!
도움이 되셨다면 공감 / 댓글 부탁드립니다 😊