가변 인자 튜플 — 스프레드와 추론으로 복잡한 타입 다루기

지난 글에서 기본 튜플 타입을 살펴봤다. 이번 글에서는 TypeScript 4.0에서 도입된 가변 인자 튜플 타입(Variadic Tuple Types)을 다룬다. 가변 인자 튜플은 튜플 타입에 제네릭 스프레드를 결합해, 타입 수준에서 배열을 자유롭게 연결하고 변형할 수 있게 해준다. 처음에는 낯설게 느껴지지만, 한번 익히면 고급 유틸리티 타입을 직접 만들 때 없어서는 안 될 도구가 된다.

가변 인자 튜플 스프레드

가변 인자 튜플이란

기존 TypeScript에서는 튜플 타입 안에 제네릭 타입 변수를 스프레드할 수 없었다. TypeScript 4.0이 이 제약을 풀면서, 다음과 같은 코드가 가능해졌다.

// TS 4.0 이전에는 불가능했던 패턴
type Concat<A extends any[], B extends any[]> = [...A, ...B];

type Result = Concat<[1, 2], [3, 4]>; // [1, 2, 3, 4]

핵심은 ...A처럼 제네릭 타입 변수를 스프레드할 수 있다는 점이다. A extends any[]로 A가 배열 타입임을 제약하면, ...A는 해당 배열의 모든 요소를 펼쳐 넣는다.

// 가변 인자 튜플의 기본 규칙
// 1. 타입 변수는 any[]를 extends해야 함
// 2. 스프레드는 튜플 타입 내에서만 사용 가능
// 3. 하나의 튜플에 rest 스프레드는 하나만

type Valid<A extends any[]> = [...A, string];   // OK
type AlsoValid<A extends any[], B extends any[]> = [...A, ...B]; // OK

타입 수준 스프레드 연산

가변 인자 튜플의 스프레드는 값 수준의 스프레드 연산자(...)와 완전히 대응한다. 함수가 하는 일을 타입이 그대로 추적한다.

// 값 수준
function concat<A extends any[], B extends any[]>(a: A, b: B): [...A, ...B] {
  return [...a, ...b];
}

// 타입이 정확히 추론됨
const result = concat([1, 2] as [1, 2], ["a", "b"] as ["a", "b"]);
// result: [1, 2, "a", "b"] — 구체적인 리터럴 타입까지 보존!

// 일반 배열을 넘기면 일반 배열 타입
const r2 = concat([1, 2], [3, 4]);
// r2: number[] — 배열이면 배열로 추론

TS 4.0 이전에는 이런 함수의 반환 타입을 (A | B)[]로밖에 표현할 수 없었다. 이제는 입력 튜플의 구조를 정확히 반영한 타입을 돌려줄 수 있다.

Concat, Prepend, Append 패턴

가변 인자 튜플로 만들 수 있는 대표적인 유틸리티 타입들이다.

Concat

두 튜플을 이어 붙인다.

type Concat<A extends any[], B extends any[]> = [...A, ...B];

type AB = Concat<[1, 2], [3, 4]>;       // [1, 2, 3, 4]
type Mixed = Concat<[string], [number, boolean]>; // [string, number, boolean]
type Empty = Concat<[], [1, 2, 3]>;     // [1, 2, 3]

Prepend

튜플 앞에 요소를 추가한다.

type Prepend<T, Arr extends any[]> = [T, ...Arr];

type P1 = Prepend<0, [1, 2, 3]>;    // [0, 1, 2, 3]
type P2 = Prepend<string, [number]>; // [string, number]

Append

튜플 뒤에 요소를 추가한다.

type Append<Arr extends any[], T> = [...Arr, T];

type A1 = Append<[1, 2, 3], 4>;     // [1, 2, 3, 4]
type A2 = Append<[string], boolean>; // [string, boolean]

조합 활용

// 앞뒤에 동시에 추가
type Wrap<T, Arr extends any[], U> = [T, ...Arr, U];

type Wrapped = Wrap<string, [number, boolean], null>;
// [string, number, boolean, null]

가변 인자 튜플 추론 패턴

함수 매개변수와 가변 인자 튜플

가변 인자 튜플의 진가는 함수 매개변수 타입을 다룰 때 드러난다. TypeScript 내장 유틸리티 Parameters와 ReturnType이 이 기반 위에서 동작한다.

// 표준 라이브러리 정의 (개념적으로)
type Parameters<T extends (...args: any) => any>
  = T extends (...args: infer P) => any ? P : never;

type ReturnType<T extends (...args: any) => any>
  = T extends (...args: any) => infer R ? R : never;

// 활용 예시
function greet(name: string, age: number): string {
  return `${name} (${age})`;
}

type GreetParams = Parameters<typeof greet>;   // [name: string, age: number]
type GreetReturn = ReturnType<typeof greet>;   // string

가변 인자 튜플로 매개변수 타입을 직접 조작할 수 있다:

// 첫 번째 인자를 제거하는 유틸리티
type DropFirst<T extends any[]> = T extends [any, ...infer Rest] ? Rest : never;

type F = (a: string, b: number, c: boolean) => void;
type WithoutFirst = DropFirst<Parameters<F>>; // [b: number, c: boolean]

실전 활용 예시

함수 바인딩 타입

// bind()의 타입을 더 정확하게 표현
type Bind<F extends (...args: any[]) => any, BoundArgs extends any[]> = (
  ...args: DropFirst<Parameters<F>>
) => ReturnType<F>;

// 미들웨어 파이프라인
type Middleware<In extends any[], Out> = (...args: In) => Out;

type Pipeline<Args extends any[], Mid, Out> = [
  first: Middleware<Args, Mid>,
  second: Middleware<[Mid], Out>
];

이벤트 시스템

type EventMap = {
  click: [x: number, y: number];
  keydown: [key: string, modifiers: string[]];
  resize: [width: number, height: number];
};

function on<K extends keyof EventMap>(
  event: K,
  handler: (...args: EventMap[K]) => void
): void {
  // 구현 생략
}

// args가 [x: number, y: number]로 정확히 추론됨
on("click", (x, y) => {
  console.log(x + y);
});

Curry 타입

가변 인자 튜플로 커링 함수의 타입을 표현할 수도 있다.

// 단순 2인자 커링
type Curry2<A, B, R> = (a: A) => (b: B) => R;

// 매개변수 배열로부터 커링 타입 생성
type CurryArgs<Args extends any[], R> =
  Args extends [infer First, ...infer Rest]
    ? (arg: First) => CurryArgs<Rest, R>
    : R;

type Curried = CurryArgs<[string, number, boolean], string>;
// (arg: string) => (arg: number) => (arg: boolean) => string

주의사항과 한계

rest 위치 제한 (TS 4.2 이전)

TypeScript 4.2 이전에는 rest 요소가 마지막 위치에만 올 수 있었다. 4.2부터 중간 위치도 허용되지만, 여전히 제약이 있다.

// TS 4.2+: 중간 rest 허용
type Middle = [first: string, ...middle: number[], last: boolean]; // OK

// 단, rest 요소는 하나의 튜플에 하나만
// type TwoRests = [...string[], ...number[]]; // Error

재귀적 사용의 복잡성

가변 인자 튜플을 재귀적으로 사용하면 타입 추론이 느려지거나 복잡해질 수 있다.

// 깊은 재귀는 타입 연산이 무거워짐
type Reverse<T extends any[], Acc extends any[] = []> =
  T extends [infer Head, ...infer Tail]
    ? Reverse<Tail, [Head, ...Acc]>
    : Acc;

type Rev = Reverse<[1, 2, 3, 4, 5]>; // [5, 4, 3, 2, 1]
// 긴 튜플에서는 성능 주의

any[]와 unknown[]의 차이

제약에 any[]와 unknown[]은 다르게 동작한다:

// any[]를 extends하면 스프레드 가능
type WithAny<T extends any[]> = [...T, string]; // OK

// unknown[]도 스프레드 가능 (더 안전)
type WithUnknown<T extends unknown[]> = [...T, string]; // OK

// 단, unknown[]로 제약하면 배열 원소 타입이 unknown으로 처리됨

실제 코드에서는 any[]가 더 유연하지만 타입 안전성을 일부 포기한다. 라이브러리를 작성할 때는 의도에 따라 선택하자.

지난 글: 튜플 타입 — 고정 길이 이종 배열의 완전 정복

다음 글: 객체 타입 완전 정리 — 프로퍼티·옵셔널·인덱스 시그니처

읽어주셔서 감사합니다. 😊