TypeScript Academy · 강의

가변 인자 함수에 타입 지정하기

가변 튜플 타입으로 유연한 API를 구축합니다.

가변 인자 함수에 타입 지정하기은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

제네릭 가변 인자 함수

가변 튜플 타입을 사용하면 제네릭이 인수 목록을 캡처하고 조작할 수 있습니다. 이를 통해 튜플을 연결하고, 매개변수를 전달하며, 호출 시그니처를 완전한 타입 안전성을 유지하면서 재구성하는 유틸리티를 만들 수 있습니다.

인수를 튜플로 캡처하기

unknown[]으로 제한된 제네릭은 전체 인수 목록을 튜플 타입 T로 캡처하면서 각 매개변수의 타입과 위치를 보존할 수 있습니다.

function tuple<T extends unknown[]>(...args: T): T {
  return args
}
const t = tuple("a", 1, true) // type [string, number, boolean]
console.log(t)

제네릭 튜플 스프레드하기

캡처한 제네릭 튜플을 다른 매개변수 목록에 스프레드할 수 있습니다. 이렇게 하면 각 인수의 정확한 타입을 유지하면서 인수를 전달할 수 있습니다.

function wrap<T extends unknown[]>(fn: (...args: T) => void) {
  return (...args: T) => fn(...args)
}
const log = wrap((n: number, s: string) => console.log(n, s))
log(1, "hi")

두 튜플 연결하기

가변 튜플 타입은 튜플을 결합할 때 특히 유용합니다. 반환 타입에서 두 제네릭 튜플을 스프레드하면 두 튜플이 연결된 결과가 만들어집니다.

function concat<A extends unknown[], B extends unknown[]>(a: A, b: B): [...A, ...B] {
  return [...a, ...b]
}
const r = concat([1, 2], ["a"]) // [number, number, string]
console.log(r)

결과 타입이 정확한 이유

[...A, ...B]가 제네릭 튜플을 스프레드하므로 결과는 단순히 확장된 유니언 배열이 아니라 각 요소의 타입과 순서를 그대로 보존합니다.

function concat<A extends unknown[], B extends unknown[]>(a: A, b: B): [...A, ...B] {
  return [...a, ...b]
}
const r = concat([true], [42])
const flag: boolean = r[0]
const num: number = r[1]
console.log(flag, num)

인수를 앞에 추가하기

가변 튜플을 사용하면 매개변수 목록을 재구성할 수 있습니다. 예를 들어 콜백의 시그니처 앞에 인수를 추가하는 함수를 만들 수 있습니다.

function withId<T extends unknown[]>(fn: (...args: T) => void) {
  return (id: number, ...rest: T) => {
    console.log("id", id)
    fn(...rest)
  }
}
const f = withId((msg: string) => console.log(msg))
f(7, "hello")

첫 요소 타입 추출하기

튜플 매개변수를 사용하면 레이블이 지정된 튜플을 통해 첫 요소 타입과 나머지를 분리한 다음 각 부분을 다룰 수 있습니다.

function head<H, T extends unknown[]>(...args: [H, ...T]): H {
  return args[0]
}
const h = head("first", 2, 3) // type string
console.log(h)

매개변수 유틸리티 타입

내장된 Parameters<F>는 함수의 인수 목록을 튜플로 추출하며, 이 기능 자체도 가변 튜플 타입을 기반으로 합니다. 시그니처의 매개변수를 다른 곳에서 재사용할 수 있습니다.

function greet(name: string, age: number) {}
type GreetArgs = Parameters<typeof greet> // [string, number]
const args: GreetArgs = ["Ada", 36]
console.log(args)

Parameters로 전달하기

Parameters와 나머지 스프레드를 결합하면 기존 함수에 동일한 타입 지정으로 인수를 전달하는 래퍼를 만들 수 있습니다.

function add(a: number, b: number) { return a + b }
function traced(...args: Parameters<typeof add>): number {
  console.log("calling add", args)
  return add(...args)
}
console.log(traced(2, 3))

커리와 유사한 시그니처 만들기

가변 튜플을 사용하면 부분 적용 도우미를 만들 수 있습니다. 일부 인수는 지금 캡처하고 나머지는 나중에 받되, 전체를 타입 검사할 수 있습니다.

function partial<A extends unknown[], B extends unknown[], R>(
  fn: (...args: [...A, ...B]) => R,
  ...a: A
) {
  return (...b: B) => fn(...a, ...b)
}
const addThree = (x: number, y: number, z: number) => x + y + z
const add5 = partial(addThree, 5)
console.log(add5(2, 3)) // 10

강력함과 주의점

가변 튜플 제네릭은 래퍼, 전달 함수, 연결 함수처럼 정확하고 재사용 가능한 함수 형태 지정 도구를 제공합니다. 고급 기능이므로 타입의 정확성이 실제로 복잡성을 감수할 만할 때 사용하십시오.

function pipe2<A extends unknown[], B, C>(
  f: (...a: A) => B,
  g: (b: B) => C
) {
  return (...a: A) => g(f(...a))
}
const fn = pipe2((n: number) => n * 2, (n) => n + 1)
console.log(fn(5)) // 11

빠른 확인

가변 튜플 제네릭에 대한 이해도를 테스트해 보십시오.

복습

가변 튜플 타입을 사용하면 제네릭이 인수 목록을 튜플로 캡처하고 이를 매개변수 위치나 반환 위치에서 스프레드할 수 있습니다. 이를 통해 튜플 연결([...A, ...B]), 인수 전달, 첫 요소와 나머지 분리, 부분 적용을 모두 정확한 요소 타입을 보존하면서 구현할 수 있습니다. Parameters<F>와 같은 내장 기능도 동일한 메커니즘을 사용합니다. 정확한 함수 형태의 타입 지정이 복잡성을 감수할 가치가 있을 때 이러한 도구를 사용하십시오.

자주 묻는 질문

“가변 인자 함수에 타입 지정하기” 강의는 무료인가요?

네 — “가변 인자 함수에 타입 지정하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“가변 인자 함수에 타입 지정하기”에서 뭘 배우나요?

가변 튜플 타입으로 유연한 API를 구축합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“가변 인자 함수에 타입 지정하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← TypeScript Academy(으)로 돌아가기