[Typescript] 제네릭(Generic) 타입이란?

제네릭(Generic) 타입이란? 🤔

제네릭(Generic)은 타입을 파라미터화하여 다양한 타입을 처리할 수 있도록 만드는 TypeScript의 강력한 기능임. JavaScript는 동적 타입 언어로 모든 타입을 처리할 수 있지만, 타입 안전성을 보장하지 않아 런타임 오류가 발생할 가능성이 큼. TypeScript의 제네릭은 함수, 클래스, 인터페이스 등에서 사용하는 데이터의 타입을 외부에서 지정할 수 있게 해줘, 유연하면서도 타입 안전한 코드를 작성할 수 있도록 도와줌.

왜 제네릭을 사용해야 할까? 🌟

제네릭을 사용하면 반복적인 코드 작성을 줄이고, 여러 타입을 처리하면서도 타입 검사를 강화할 수 있음. 제네릭의 주요 장점은 다음과 같음:

• 코드 재사용성 증가: 여러 타입에 대해 반복적으로 동일한 함수를 작성할 필요 없이 제네릭으로 처리 가능.
• 타입 안전성 강화: 제네릭을 통해 컴파일 타임에 타입 검사를 수행하므로, 예기치 않은 타입 오류를 줄일 수 있음.
• 유연성: 함수를 호출할 때 다양한 타입을 지정할 수 있어, 더 많은 상황에서 사용할 수 있음.

제네릭 기본 문법 🎯

제네릭은 타입 변수를 사용하여 타입을 파라미터화함. 보통 타입 변수를 <T>와 같은 형태로 표기함. 예를 들어, 전달된 값의 타입을 유지하면서 반환하는 함수를 제네릭으로 작성해보겠음.

function identity<T>(value: T): T {
  return value;
}

console.log(identity<string>("Hello")); // "Hello"
console.log(identity<number>(42));      // 42

위 코드에서 <T>는 타입 변수이며, 함수 호출 시 identity<string>처럼 원하는 타입을 지정해 사용함. identity 함수는 어떤 타입이 전달되든 동일한 타입으로 반환하여 타입 안정성을 보장함.

다양한 제네릭 사용 ✍️

제네릭을 사용한 배열 함수

T[]와 같은 형태로 배열의 요소 타입을 제네릭으로 설정할 수 있음. 다음 예제는 제네릭을 사용해 배열의 첫 번째 요소를 반환하는 함수임.

function firstElement<T>(arr: T[]): T | undefined {
  return arr.length > 0 ? arr[0] : undefined;
}

console.log(firstElement([1, 2, 3]));    // 1
console.log(firstElement(["a", "b", "c"])); // "a"

여기서 T[]는 배열의 요소 타입이 어떤 타입이든 상관없이 적용될 수 있음을 의미하며, 타입 안전성을 유지하면서 배열의 첫 번째 요소를 반환함.

제네릭 인터페이스

제네릭은 인터페이스에도 사용할 수 있음. 제네릭 인터페이스를 통해 다양한 데이터 타입을 유연하게 처리할 수 있음.

interface Pair<T, U> {
  first: T;
  second: U;
}

const numberPair: Pair<number, number> = { first: 1, second: 2 };
const stringNumberPair: Pair<string, number> = { first: "age", second: 30 };