2023 TypeScript Generics • WOOYIT 테크 블로그

TypeScript Generics개요

TypeScript Generics은 코드 재사용성을 높이고, 컴파일 시 타입 안정성을 보장하기 위해 TypeScript에서 제공하는 중요한 기능입니다. 이는 특정한 타입을 지정하지 않고, 그 타입을 다른 값으로 쉽게 바꿀 수 있는 유연성을 제공합니다.

1. 제네릭이란 무엇인가?

제네릭은 함수나 클래스 등에 사용되는 타입을 고정하지 않고, 재사용 가능한 컴포넌트를 생성할 수 있게 합니다. 제네릭을 사용하면 여러 타입을 다룰 수 있으므로, 한 가지 타입만을 처리하는 함수나 클래스보다 유연하게 작업할 수 있습니다. 제네릭은 크게 3가지 – 함수, 인터페이스, 클래스 – 에서 사용됩니다.

2. TypeScript 제네릭의 이점

코드 재사용성

일반적인 함수나 클래스는 특정 타입에 종속되어 있지만, 제네릭을 사용하면 여러 타입에 대해 동일한 기능을 수행하는 컴포넌트를 쉽게 생성할 수 있습니다.

타입 안정성

제네릭을 사용하면 컴파일 시에 타입 검사가 수행되므로, 런타임 에러를 줄이고 코드의 안정성을 향상시킬 수 있습니다.

3. TypeScript Generics 예제

Function 제네릭

다양한 타입의 배열을 입력받아 그 길이를 반환하는 함수를 생각해봅시다. 다음 코드는 제네릭을 사용하여 이를 구현한 것입니다.

<code>
function getSize<T>(arr: T[]): number {
    return arr.length;
}

const arr1 = [1, 2, 3];
getSize<number>(arr1);
</code>

Interface 제네릭

제네릭은 인터페이스에도 적용될 수 있습니다. 제네릭을 사용하면 특정한 타입을 인터페이스에 적용하여 다양한 객체를 생성할 수 있습니다.

<code>
interface Mobile<T> {
  name: string;
  price: number;
  option: T
}

const m1: Mobile<{color: string, coupon: boolean}> = {
   name: "s21",
   price: 1000,
   option: {
     color: "red",
     coupon: false
   }
}
</code>

복잡한 예제의 사용

제네릭은 복잡한 로직을 처리하는 데에도 사용될 수 있습니다. 여기서는 이름을 출력하는 함수에 제네릭을 적용하여 다양한 객체에 대응할 수 있도록 만들어 보겠습니다.

<code>
interface User {
  name: string;
  age: number;
}

function showName<T extends { name: string }>(data: T): string {
  return data.name;
}

const user: User = { name: "a", age: 30 }
showName(user);
</code>

5. TypeScript 제네릭의 확장

제네릭 타입 제한

제네릭 타입의 범위를 제한하려면 ‘extends’ 키워드를 사용합니다. 이렇게 하면 입력값이 특정 조건을 충족하는 경우에만 제네릭을 사용할 수 있습니다.

제네릭 타입 추론

TypeScript는 제네릭 타입을 추론할 수 있습니다. 즉, 제네릭 타입을 명시적으로 지정하지 않아도 컴파일러가 자동으로 타입을 결정할 수 있습니다.

6. 결론 및 요약

TypeScript의 제네릭은 코드의 재사용성을 높이고, 타입 안정성을 보장하는 중요한 도구입니다. 이를 통해 타입을 지정하지 않고, 그 타입을 다른 값으로 쉽게 바꿀 수 있는 유연성을 얻을 수 있습니다. 앞으로 제네릭을 활용하면 효율적이고 안정적인 코드를 작성할 수 있을 것입니다.[공식문서] 블로그

목차