icon
3장 : 함수와 타입

제네릭 함수


우리는 지금까지 숫자, 문자열, 객체 등 구체적인 타입들을 다루는 함수들을 살펴보았습니다. 하지만 때로는 어떤 특정 타입에 얽매이지 않고, 다양한 타입에서 동작할 수 있는 재사용 가능한 함수를 만들고 싶을 때가 있습니다. 예를 들어, 배열의 마지막 요소를 반환하는 함수를 만드는데, 이 배열이 숫자 배열이든, 문자열 배열이든, 아니면 객체 배열이든 상관없이 동작하도록 하고 싶다면 어떻게 해야 할까요?

이러한 상황에서 제네릭(Generics) 은 빛을 발합니다. 제네릭은 C#이나 Java와 같은 다른 언어들에서 흔히 볼 수 있는 개념으로, 타입스크립트에서는 함수, 클래스, 인터페이스 등 다양한 곳에서 사용할 수 있습니다. 제네릭을 사용하면 코드를 작성할 때 타입을 미리 지정하는 대신, 사용 시점에 타입을 동적으로 결정할 수 있도록 유연성을 제공합니다. 이는 코드를 더 강력하고 재사용 가능하며, 타입 안전하게 만드는 핵심적인 도구입니다.


제네릭 함수의 기본 개념

제네릭 함수를 만들 때는 타입 변수(Type Variable) 를 사용합니다. 이 타입 변수는 함수가 다룰 타입을 위한 임시적인 '플레이스홀더(Placeholder)' 역할을 합니다. 타입 변수는 일반적으로 꺾쇠 괄호(< >) 안에 선언하며, <T>처럼 단일 대문자를 사용하는 것이 일반적입니다.

예시를 통해 제네릭 함수의 기본 구조를 살펴보겠습니다. 입력받은 값을 그대로 반환하는 간단한 identity 함수를 만들어봅시다.

// 1. 제네릭을 사용하지 않은 경우 (any 타입 사용)
function identityAny(arg: any): any {
  return arg;
}
let outputAny1 = identityAny("myString"); // outputAny1의 타입은 any
let outputAny2 = identityAny(123);      // outputAny2의 타입은 any

// any를 사용하면 어떤 타입이든 받을 수 있지만, 반환되는 값의 타입 정보를 잃어버립니다.
// outputAny1.length; // 런타임 오류 가능성 (number일 경우)

// 2. 제네릭을 사용한 경우
function identity<T>(arg: T): T {
  return arg;
}

// 함수 호출 시 타입 인자(Type Argument)를 명시적으로 전달
let output1 = identity<string>("myString"); // output1의 타입은 string으로 추론됩니다.
let output2 = identity<number>(123);      // output2의 타입은 number로 추론됩니다.

// 대부분의 경우 타입 추론에 의해 타입 인자를 생략할 수 있습니다.
let output3 = identity("anotherString"); // output3의 타입은 string으로 추론됩니다.
let output4 = identity(true);           // output4의 타입은 boolean으로 추론됩니다.

console.log(output1.length); // 안전하게 .length 속성에 접근 가능
// console.log(output2.toFixed(2)); // 안전하게 .toFixed(2) 메서드에 접근 가능

// console.log(output1.toFixed(2)); // 오류: 'string' 형식에 'toFixed' 속성이 없습니다. (타입 안전성 유지)

제네릭 함수의 핵심

  • 타입 변수 <T>: 함수 이름 바로 뒤에 T와 같은 타입 변수를 선언합니다. 이 T는 함수가 호출될 때 실제 타입(예: string, number)으로 대체됩니다.
  • 유연성: arg: T를 통해 함수의 매개변수 arg가 어떤 타입이든 받을 수 있고, 받은 그 타입과 동일한 타입을 반환함을 명시합니다.
  • 타입 안전성 유지: any처럼 타입 검사를 포기하는 것이 아니라, 실제 사용될 타입 정보를 보존하여 타입 안전성을 유지합니다. output1string 타입으로 추론되었으므로 toFixed와 같은 number 타입 메서드에 접근하면 오류를 발생시킵니다.

제네릭 여러 개 사용하기

하나의 제네릭 함수는 여러 개의 타입 변수를 가질 수 있습니다. 예를 들어, 두 개의 다른 타입 인자를 받아 처리해야 할 때 유용합니다.

function pair<T1, T2>(arg1: T1, arg2: T2): [T1, T2] {
  return [arg1, arg2];
}

let myPair = pair("hello", 123); // myPair의 타입은 [string, number]로 추론됩니다.
let anotherPair = pair(true, { name: "Alice" }); // anotherPair의 타입은 [boolean, { name: string }]으로 추론됩니다.

console.log(myPair[0].toUpperCase()); // "HELLO" (string 메서드 사용 가능)
console.log(myPair[1].toFixed(2));    // "123.00" (number 메서드 사용 가능)

pair<T1, T2>처럼 여러 타입 변수를 콤마로 구분하여 선언할 수 있습니다. 반환 타입 [T1, T2]는 두 타입 변수를 요소로 갖는 튜플을 반환하겠다는 의미입니다.


제네릭 제약 조건

때로는 제네릭 타입 변수가 모든 타입을 허용하는 것이 아니라, 특정 조건을 만족하는 타입만 허용하도록 제한하고 싶을 때가 있습니다. 예를 들어, length 속성을 가진 값만 받을 수 있는 함수를 만들고 싶다면, string이나 배열(Array)은 가능하지만 number는 불가능하게 해야 합니다. 이때 제네릭 제약 조건을 사용합니다.

제약 조건은 extends 키워드를 사용하여 정의하며, "T는 X 타입의 속성을 가지고 있어야 한다"는 의미를 가집니다.

interface Lengthwise {
  length: number;
}

// T는 Lengthwise 인터페이스를 확장해야 합니다.
function getLengthWithConstraint<T extends Lengthwise>(arg: T): number {
  return arg.length;
}

// Lengthwise 인터페이스를 만족하는 타입들은 허용됩니다.
console.log(getLengthWithConstraint("hello world"));     // 11 (string은 length 속성을 가집니다.)
console.log(getLengthWithConstraint([1, 2, 3]));         // 3 (배열도 length 속성을 가집니다.)
console.log(getLengthWithConstraint({ length: 10, value: "test" })); // 10 (객체 리터럴도 가능)

// 오류: length 속성이 없는 타입은 허용되지 않습니다.
// console.log(getLengthWithConstraint(123)); // Error: 'number' 형식에 'length' 속성이 없습니다.
// console.log(getLengthWithConstraint(true)); // Error: 'boolean' 형식에 'length' 속성이 없습니다.

T extends Lengthwise는 타입 변수 TLengthwise 인터페이스가 정의하는 length: number 속성을 반드시 가지고 있어야 한다는 제약 조건을 설정합니다. 이로 인해 함수 내부에서 arg.length에 안전하게 접근할 수 있게 됩니다.


keyof 연산자와 제네릭

keyof 연산자는 객체 타입의 모든 속성 이름을 문자열 리터럴 유니온 타입으로 반환합니다. 이 keyof 연산자를 제네릭과 함께 사용하면, 객체의 특정 속성에 안전하게 접근하는 함수를 만들 수 있습니다.

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

let user = {
  name: "김철수",
  age: 30,
  city: "서울",
};

// K는 'name', 'age', 'city' 중 하나여야 합니다.
let userName = getProperty(user, "name"); // userName의 타입은 string
let userAge = getProperty(user, "age");   // userAge의 타입은 number

console.log(userName); // 김철수
console.log(userAge);  // 30

// 오류: 'address'는 user 객체의 속성이 아닙니다.
// let userAddress = getProperty(user, "address"); // Error: Argument of type '"address"' is not assignable to parameter of type '"name" | "age" | "city"'.

여기서 K extends keyof T는 타입 변수 KT 타입의 객체가 가질 수 있는 속성 이름들(즉, keyof T) 중 하나여야 함을 의미합니다. 이렇게 하면 obj[key] 접근이 타입 안전하게 보장됩니다.


제네릭 함수는 타입스크립트의 가장 강력한 기능 중 하나입니다. 코드를 재사용하면서도 엄격한 타입 검사를 유지할 수 있게 해주어, 더 견고하고 유연한 소프트웨어를 개발할 수 있도록 돕습니다. 처음에는 다소 어렵게 느껴질 수 있지만, 익숙해지면 여러분의 개발 생산성을 크게 향상시켜 줄 것입니다.