[TypeScript] 제네릭(Generic)

제네릭(Generic)

들어가며

• 타입스크립트(TypeScript)에서 사용되는 제네릭(Generic)에 대해 정리해본다.

 

제네릭(Generic)

개념

• 유연하면서도 타입 안전성을 제공하는 방법
• 제네릭을 사용하면 함수나 클래스를 다양한 타입과 함께 사용할 수 있으며, 타입을 구체적으로 지정할 수 있다.

 

제네릭의 필요성

• 아래의 @insertAtBeginning@ 함수를 보자.
  • 이 함수는 배열과 값을 매개변수로 받아, 값이 배열의 맨 앞에 추가된 새로운 배열을 반환한다.

function insertAtBeginning(array: any[], value: any) {
  return [value, ...array];
}

const updatedArray = insertAtBeginning(demoArray, -1); // [-1, 1, 2, 3]
updatedArray[0].split('');   // ERROR

 

• 위의 함수는 @any@ 타입을 사용하여 모든 값을 허용하지만, 타입스크립트는 배열의 실제 타입을 추론하지 못한다.
• 따라서 @updatedArray@에서 첫 번째 요소에 대해 문자열 메서드인 @split@을 호출할 때 타입 오류가 발생하지 않아 런타임 오류가 발생할 수 있다.
  • 이러한 문제점을 해결하기 위해 제네릭(Generic)을 사용한다.

 

제네릭 사용하기

• 제네릭을 사용하여 함수가 다양한 타입을 처리할 수 있도록 만들어 보자.
• 함수 정의에서 @<T>@와 같은 제네릭 타입을 사용하여 매개변수와 반환 값의 타입을 동적으로 처리한다.
  
  • 여기서 @<T>@는 제네릭 타입 변수로, @T@는 매개변수와 반환 값에서 사용되는 타입을 의미한다.

function insertAtBeginning<T>(array: T[], value: T) {
  return [value, ...array];
}

 

• 제네릭을 사용하면 타입스크립트는 함수 호출 시 실제 타입을 추론한다.
• 예를 들어, 숫자 배열을 입력하면 반환값도 숫자 배열로 추론된다.

const numberArray = [1, 2, 3];
const updatedNumberArray = insertAtBeginning(numberArray, -1);  // number[] 타입으로 추론

 

• 문자열 배열을 사용할 때도 타입스크립트는 문자열 배열로 올바르게 추론한다.

const stringArray = ['a', 'b', 'c'];
const updatedStringArray = insertAtBeginning(stringArray, 'z');   // string[] 타입으로 추론

 

• 이제 다음과 같이 문자열 메서드인 @split@을 호출해도 오류가 발생하지 않는다.

const stringArray = ['a', 'b', 'c'];
const updatedStringArray = insertAtBeginning(stringArray, 'z'); 
updatedArray[0].split('');   // WORK

 

제네릭의 장점

• 제네릭을 사용하면 함수가 다양한 타입을 처리할 수 있으며, 함수 호출 시 구체적인 타입이 정해지므로 타입 안전성을 유지한다.
• 함수 호출 시 타입스크립트는 제네릭 타입 @T@를 기반으로 매개변수와 반환 값의 타입을 올바르게 추론할 수 있다.

 

참고 사이트

Documentation - Generics