TypeScript 선택적 매개변수, 기본값, 나머지 매개변수

매개변수 이름 뒤에 ?를 붙이면 선택적 매개변수가 됩니다. 호출하는 쪽은 생략할 수 있고, 함수 안에서 그 타입에는 undefined가 포함됩니다.

function greet(name: string, title?: string): string {
  // title is string | undefined here
  return title ? `Hello, ${title} ${name}` : `Hello, ${name}`;
}

console.log(greet("Lovelace"));          // Hello, Lovelace
console.log(greet("Lovelace", "Lady"));  // Hello, Lady Lovelace

TypeScript는 인수 개수를 검사하므로 ?가 없다면 첫 번째 호출은 컴파일 오류입니다: Expected 2 arguments, but got 1.(TS2554).

선택적 매개변수는 undefined일 수 있다

호출하는 쪽이 생략할 수 있으므로 함수 안에서 선택적 매개변수의 타입은 T | undefined입니다. strictNullChecks에서는 T로 쓰기 전에 undefined 경우를 처리해야 합니다.

function formatPrice(amount: number, currency?: string): string {
  // currency.toUpperCase() here would fail: 'currency' is possibly 'undefined'. (TS18048)
  const code = currency?.toUpperCase() ?? "USD";
  return `${amount.toFixed(2)} ${code}`;
}

console.log(formatPrice(9.5));        // 9.50 USD
console.log(formatPrice(12, "eur"));  // 12.00 EUR

여기서는 옵셔널 체이닝(?.)과 널 병합(??)을 흔히 씁니다. 대체값이 고정된 값이라면 기본 매개변수가 더 짧습니다.

매개변수 기본값

기본값은 호출하는 쪽에게 매개변수를 선택적으로 만들고, 함수 안에서는 undefined 없는 타입을 줍니다. 타입은 기본값에서 추론되므로 표기가 필요 없는 경우가 많습니다.

function repeat(text: string, times = 2, separator: string = " "): string {
  // times: number, separator: string (never undefined here)
  return Array.from({ length: times }, () => text).join(separator);
}

console.log(repeat("ha"));              // ha ha
console.log(repeat("ha", 3, "-"));      // ha-ha-ha
console.log(repeat("ha", undefined, "")); // haha

호출하는 쪽이 보는 시그니처는 repeat(text: string, times?: number, separator?: string)입니다. 기본값은 JavaScript의 규칙을 따릅니다. 인수가 undefined일 때(생략했든 명시적으로 넘겼든) 적용되고, null일 때는 적용되지 않습니다. 기본값 표현식은 앞의 매개변수를 쓸 수 있습니다: function range(start: number, end = start + 10).

매개변수 순서 규칙

필수 매개변수 앞에 기본값 매개변수를 두는 것은 합법이지만 어색합니다. 호출하는 쪽에게 그 타입은 number | undefined가 되고, 자리 채우기로 undefined를 쓰는 것을 좋아할 사람은 없습니다. 앞쪽에 유연한 매개변수가 필요하다면 옵션 객체나 함수 오버로딩을 쓰세요.

생략과 undefined

x?: number와 x: number | undefined는 비슷해 보이고 함수 안에서의 타입도 같습니다. 호출하는 쪽에서 다릅니다. 앞의 것은 생략할 수 있고, 뒤의 것은 반드시 넘겨야 합니다.

function a(x?: number) { return x; }
function b(x: number | undefined) { return x; }

console.log(a());          // undefined
console.log(b(undefined)); // undefined
// @ts-expect-error: Expected 1 arguments, but got 0.
b();

값이 없어도 되지만 필수인 인수에는 | undefined를 써서 모든 호출자가 그것을 고민하게 하세요. 생략하는 것이 평범한 호출이라면 ?를 쓰세요. (메시지에 정말로 "1 arguments"라고 나오는데, TypeScript의 표현이 그렇습니다.)

나머지 매개변수

나머지 매개변수 ...name: T[]는 인수를 몇 개든 배열로 모읍니다. 반드시 마지막 매개변수여야 합니다.

function sum(...values: number[]): number {
  return values.reduce((total, v) => total + v, 0);
}

function tag(name: string, ...classes: string[]): string {
  return `<${name} class="${classes.join(" ")}">`;
}

console.log(sum());             // 0
console.log(sum(1, 2, 3));      // 6
const scores = [4, 8, 15];
console.log(sum(...scores));    // 27
console.log(tag("div", "card", "wide")); // <div class="card wide">

배열을 고정된 매개변수에 펼치는 것은 더 엄격합니다. 나머지 매개변수는 어떤 number[]를 펼쳐도 받지만, (a: number, b: number)로 선언한 함수는 튜플을 펼친 것만 받습니다. TypeScript가 길이를 알아야 하기 때문입니다.

function point(x: number, y: number) { return { x, y }; }

const list = [3, 4];            // number[]
point(...list);
// error TS2556: A spread argument must either have a tuple type or be passed to a rest parameter.

const pair = [3, 4] as const;   // readonly [3, 4]
point(...pair);                 // fine

나머지 매개변수는 튜플 타입을 가질 수도 있으며, 그러면 각 위치에 타입이 붙습니다: ...args: [name: string, age?: number].

옵션 객체

함수에 선택적 매개변수가 두세 개를 넘으면 호출하는 쪽이 위치를 헷갈리게 됩니다. 기본값이 있는 옵션 객체는 이름이 있고 순서와 무관한 인수를 제공합니다.

interface FetchOptions {
  retries?: number;
  timeoutMs?: number;
  verbose?: boolean;
}

function fetchData(url: string, { retries = 3, timeoutMs = 5000, verbose = false }: FetchOptions = {}): string {
  return `${url} retries=${retries} timeout=${timeoutMs} verbose=${verbose}`;
}

console.log(fetchData("/a"));
// /a retries=3 timeout=5000 verbose=false
console.log(fetchData("/b", { verbose: true }));
// /b retries=3 timeout=5000 verbose=true

끝의 = {}가 객체 전체를 선택적으로 만듭니다. 이것이 없으면 fetchData("/a")는 컴파일 오류(Expected 2 arguments, but got 1., TS2554)이고, 평범한 JavaScript에서는 구조 분해에 읽을 객체가 필요하므로 같은 호출이 런타임에 TypeError를 던집니다.

콜백 타입의 선택적 매개변수

함수 타입에서 ?는 "이 콜백을 호출하는 쪽이 이 인수를 넘기지 않을 수 있다"는 뜻입니다. "콜백이 이 매개변수를 건너뛸 수 있다"는 뜻이 아닙니다. 콜백은 뒤쪽 매개변수를 언제든 무시할 수 있습니다. 그러니 핸들러가 더 적은 인수를 받게 하려고 콜백 매개변수를 선택적으로 표시하지 마세요.

// Too loose: every handler must now cope with index being undefined
type Visit = (item: string, index?: number) => void;

// Right: the caller always passes both; handlers may use only item
type VisitStrict = (item: string, index: number) => void;
const log: VisitStrict = (item) => console.log(item);