[Typescript] 제네릭(Generic)

❓ 정의

- 일반화된 데이터 타입

- 함수, 타입, 클래스 등에서 내부적으로 사용될 타입을 미리 정해두지 않고 타입 변수를 사용해서 해당 위치를 비워놓은 다음, 실제로 그 값을 사용할 때 외부에서 타입 변수 자리에 타입을 지정하여 사용하는 방식

= 코드를 작성할 때 타입을 고정하지 않고, 사용할 때 타입을 지정할 수 있도록 하는 기능

- any와 다른 점은 아무 타입이나 무분별하게 받는 것이 아니라, 배열 생성 시점에 원하는 타입으로 특정 가능하다는 것

▶ 기본 사용 예시

type ExampleArrayType<T> = T[];

const array1: ExampleArrayType<string> = ["치킨", "피자"];

---

❗ 사용이유

✅ 다양한 타입을 받게 함으로써 코드를 효율적으로 재사용

✅ 의도를 명확하게 드러냄으로써 가독성 향상

 

✅ any를 쓰지 않고 유연한 타입 적용이 가능해 안전함

---

💥 주의

1️⃣ 특정 타입에서만 존재하는 멤버 참조시 에러 발생

- 예) 배열에만 존재하는 length 속성을 제네릭에서 참조하려고 할 때 에러 발생

2️⃣ 파일 확장자가 tsx일 때 화살표 함수에 제네릭 사용시 에러 발생

- 제네릭의 꺾쇠괄호와 태그의 꺾쇠괄호를 혼동하여 생기는 문제

-> 해결법: extends 키워드를 사용해 컴파일러에게 특정 타입의 하위 타입만 올 수 있음을 알려주면 됨!

const arrowExampleFunc = <T extends {}>(arg: T): T[] => {
	return new Array(3).fill(arg);
};

아래는 T가 length 속성을 가진 타입만 받을 수 있도록 제한한 예시이다.

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

getLength("Hello");  // ✅ 문자열은 length 속성이 있음
getLength([1, 2, 3]);  // ✅ 배열도 length 속성이 있음
// getLength(10);  // ❌ 숫자는 length 속성이 없음 (에러 발생)

3️⃣ 제네릭 오남용

- 한 번만 사용되는 경우(굳이 사용하지 않아도 됨), any 사용, 과한 사용 주의!

---

💠 예시

1️⃣ API 응답 값 타입 지정

interface ExampleApiResponse<Data> {
	data: Data;
	statusCode: string;
}

const fetchPriceInfo = (): Promise<MobileApiResponse<PriceInfo>> => {
	const ~~~

이렇게 API 응답 값에 따라 달라지는 data를 제네릭 타입 Data로 선언한 후 실제 API 응답 값의 타입을 지정할 수 있다.