본문으로 건너뛰기

안동민 개발노트

본문 시작

제네릭 함수

호출 시점의 타입을 보존하는 제네릭 함수를 만들고 여러 타입 변수·extends 제약·keyof로 안전한 속성 접근을 구현합니다.

우리는 지금까지 숫자, 문자열, 객체처럼 구체적인 타입을 다루는 함수들을 살펴봤습니다.

하지만 실무에서는 특정 타입에 묶이지 않고 다양한 타입에서 동작하는 재사용 함수가 필요합니다.

예를 들어 배열의 마지막 요소를 반환하는 함수를 만들 때, 숫자 배열이든 문자열 배열이든 객체 배열이든 동일하게 쓰고 싶은 상황이 대표적입니다.

이런 상황에서 제네릭(Generics)이 빛을 발합니다.

제네릭은 C#이나 Java에서도 널리 쓰이는 개념으로, 타입스크립트에서는 함수, 클래스, 인터페이스 전반에서 사용할 수 있습니다.

코드를 작성할 때 타입을 고정하지 않고, 사용 시점에 타입을 결정하도록 열어 둘 수 있다는 점이 핵심입니다.

덕분에 재사용성과 타입 안전성을 동시에 확보할 수 있습니다.


제네릭 함수의 기본 개념

제네릭은 호출 시점 타입을 입력에서 반환까지 보존한다

T는 함수가 호출될 때 정해지고, 매개변수와 반환값에 같은 타입 정보가 이어진다.

  1. Call value 인자

    들어온 실제 타입을 관찰

  2. Infer T 문자열이면 T=string, 숫자면

    T=number

  3. Apply 함수 전체의 T 자리에 같

    타입 대입

  4. Return 반환값도 같

    타입 정보 유지

점검기준
extends필요한 속성이나 형태만 제한
keyof객체에 실제 존재하는 key만 허용
any와 차이타입 정보를 포기하지 않고 재사용

제네릭 함수를 만들 때는 타입 변수(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] 접근이 타입 안전하게 보장됩니다.

getProperty는 키와 반환 타입을 함께 묶습니다

K extends keyof T 는 두 번째 인자가 실제 객체 키 중 하나인지 먼저 확인하고, T[K] 로 결과 타입을 보존합니다.

  1. 호출 시점의 객체 구조

    잃지 않고 함수 안으로 전달합니다.

  2. 문자열이면 무엇이든 받

    대신, 실제 키 집합 안에서만 움직입니다.

  3. T[K] 접근한 속성의 값 타입

    그대로 반환 타입으로 연결합니다.

단계타입 식컴파일러가 확정하는 것
1. 객체에서 T 추론T = Username, age, city 속성을 가진 객체 구조를 보존합니다.
2. 키 집합 계산keyof T가능한 키를 "name" | "age" | "city"로 좁힙니다.
3. K를 키로 제한K extends keyof T"address"처럼 목록 밖의 문자열은 인자로 받지 않습니다.
4. 값 타입 반환T[K]"age"를 넣으면 number, "name"을 넣으면 string이 됩니다.

아래 다이어그램은 제네릭 타입 보존, 여러 타입 변수, 제약 조건, keyof 접근을 재사용 함수 설계 흐름으로 연결합니다.

제네릭 함수는 any처럼 정보를 버리지 않는다

identity<T>(arg: T): T는 입력 타입을 반환 타입까지 연결해 이후 메서드 사용을 안전하게 만든다.

  1. Input
    Input identity("hello")

    인자 타입을 확인

  2. T binding
    binding T

    string으로 고정

  3. Return
    Return 반환값도 string

    추론

  4. Safe use
    Safe use length 같

    string 멤버를 안전하게 사용

신호대응
any 사용반환 타입이 흐려져 후속 오류가 늦게 드러남
generic 사용입력과 반환의 관계가 타입으로 보존됨
제약 추가필요한 속성이 있으면 extends로 최소 조건만 요구

아래 다이어그램은 제네릭 함수를 만들 때 타입 변수를 열어 둘지, 제약할지, 속성 키까지 연결할지를 단계적으로 정리합니다.

제네릭은 타입 정보를 잃지 않는 재사용 도구다

입력 타입과 반환 타입의 관계를 유지하면서 필요한 순간에만 조건을 추가합니다.

  1. 타입 보존

    받은 타입을 그대로 반환하거나 전달합니다. identity<T>(x: T): T

  2. 관계 확장

    T, U 서로 다른 타입을 튜플이나 객체로 묶습니다. pair<T, U>

  3. 조건 부여

    extends 필요한 속성이 있을 때만 타입을 제한합니다. T extends Lengthwise

  4. 키 연결

    keyof 객체의 실제 키만 안전하게 접근합니다. K extends keyof T


제네릭 함수는 입력 타입과 반환 타입의 관계를 보존하면서 함수를 재사용하게 해 줍니다.

타입 매개변수, 제약 조건, 기본 타입을 적절히 두면 같은 구현을 여러 타입에 적용하면서도 호출 지점의 타입 정보를 유지할 수 있습니다.


다음 다이어그램은 제네릭 함수를 타입 보존과 제약 조건 중심으로 정리한 복습표입니다.

제네릭 함수의 제약 도구

타입 매개변수를 사용하면 함수가 구체 타입을 미리 고정하지 않아도 호출 시점의 타입 정보를 잃지 않습니다.

  1. 입력과 결과 연결

    타입 보존 T를 사용하면 인자로 들어온 구체 타입이 반환 타입에도 이어집니다. identity<T>

  2. 관계 표현

    복수 매개변수 T와 U처럼 여러 타입 변수를 두면 두 입력의 관계를 더 정확히 표현합니다. <T, U>

  3. 필요 속성 보장

    extends 제약 length나 id처럼 함수가 실제로 쓰는 속성만 제약으로 요구합니다. T extends HasId

  4. 키 안전성

    keyof 활용 객체의 실제 키만 선택하게 만들어 잘못된 속성 접근을 막습니다. K extends keyof T

제네릭 함수를 코드에 적용하기 전, 컴파일 오류가 막아 줄 지점과 사람이 약속해야 할 지점을 나눕니다.

제네릭 함수 보존성

구체 타입을 미리 고정하지 않고도 입력과 출력 사이의 타입 관계를 보존할 수 있어 반복 함수의 안정성이 높아집니다.

  1. 입력 타입 보관

    타입 변수 T 같은 타입 변수가 호출 시점의 실제 타입을 받아 함수 내부와 반환값에 전달합니다. <T>

  2. 관계 분리

    여러 변수 입력과 출력, 키와 값처럼 서로 다른 역할은 T와 K처럼 나눠 표현합니다. <T, K>

  3. 필요한 속성 보장

    제약 조건 extends로 최소 구조를 요구하면 내부에서 안전하게 속성에 접근할 수 있습니다. T extends

  4. 키 선택 안전화

    keyof 객체의 실제 키만 인자로 받게 만들어 속성 접근 실수를 줄입니다. K keyof T

아래 다이어그램은 제네릭 함수가 any 없이 입력과 반환의 타입 관계를 보존하는 방식을 정리합니다.

제네릭 타입 관계 읽기

제네릭 함수의 타입 변수는 아무 타입이나 허용한다는 뜻이 아니라 들어온 타입 정보를 결과까지 연결하는 이름입니다.

  1. 타입 변수
    호출 때 결정

    타입 변수 함수 이름 뒤의 T는 호출 시 실제 타입으로 대체되어 내부와 반환에 공유됩니다. identity<T>(arg: T)

  2. 여러 변수
    관계가 둘 이상일 때

    여러 변수 입력 두 개의 타입이 서로 다르면 T와 U처럼 별도 타입 변수로 표현합니다. <T, U>

  3. 제약 조건
    필요한 속성 요구

    제약 조건 length 같은 속성을 쓰려면 extends로 최소 조건을 먼저 선언합니다. T extends { length: number }

  4. keyof 연결
    속성 이름을 안전하게

    keyof 연결 객체와 키를 함께 받을 때 K extends keyof T로 잘못된 키 접근을 막습니다. K extends keyof T