[TIL] 23.03.08 TS 핸드북 - More on Functions

https://www.typescriptlang.org/ko/docs/handbook/2/functions.html#%EB%82%98%EB%A8%B8%EC%A7%80-%EB%A7%A4%EA%B0%9C%EB%B3%80%EC%88%98%EC%99%80-%EC%9D%B8%EC%88%98

Documentation - More on Functions

 

나머지 매개변수와 인수

나머지 매개변수(Rest Parameter)

정해지지 않은 수의 인수를 받아들이는 함수를 Rest Parameter를 이용해 정의할 수 있다.

function multiply(n: number, ...m: number[]) {
  return m.map((x) => n * x);
}
// 'a' gets value [10, 20, 30, 40]
const a = multiply(10, 1, 2, 3, 4);

타입스크립트에서는 이런 매개변수에 대한 타입 표기는 암묵적으로 any가 아닌 any[]를 사용하며, 타입 표현식은 Array<T> 또는 T[] 또는 튜플 타입으로 표현해야 한다.

 

나머지 인수(Rest Argument)

전개 구문을 사용해 배열에서 제공되는 인수의 개수를 제공할 수 있다.

 

일반적으로 타입스크립트는 배열이 불변하다고 간주하지 않기 때문에 다음과 같은 동작이 발생할 수 있다.

// args는 number[]이기 때문에 2개의 숫자만 가지는 배열로 간주되지 않는다.
const args = [8, 5];

// ERROR -> A spread argument must either have a tuple type or be passed to a rest parameter.
const angle = Math.atan2(...args);

 

코드에 따라 다르지만 일반적으로 이런 상황의 최선의 해결책은 const 콘텍스트가 가장 간단한 해결책이다.

// 길이가 2인 튜플로 추론됨
const args = [8, 5] as const;

// OK
const angle = Math.atan2(...args);

 

매개변수 구조 분해(Parameter Destructuring)

매개변수 분해를 사용해 인수로 제공된 객체를 함수 본문에서 하나 이상의 지역 변수로 편리하게 언팩할 수 있다.

function sum({ a, b, c }) {
  console.log(a + b + c);
}

sum({ a: 10, b: 3, c: 9 });

 

객체를 위한 타입 표기는 분해 구문 뒤에 위치하게 된다.

function sum({ a, b, c }: { a: number; b: number; c: number }) {
  console.log(a + b + c);
}

 

여기에서도 이름 붙은 타입을 사용할 수 있다.

type ABC = { a: number; b: number; c: number };

function sum({ a, b, c }: ABC) {
  console.log(a + b + c);
}

 

함수의 할당 가능성

void 반환 타입

함수 void 반환 타입은 몇몇 예측할 수 있는 동작을 발생시킬 수 있다. void 반환 타입으로의 문맥적 타이핑은 함수를 아무것도 반환하지 않도록 강제하지 않는다. 그러므로 아래의 구현들은 모두 유효하다.

type voidFunc = () => void;
 
const f1: voidFunc = () => {
  return true;
};
 
const f2: voidFunc = () => true;
 
const f3: voidFunc = function () {
  return true;
};

 

그리고 이런 함수의 반환값이 다른 변수에 할당될 때 이는 여전히 void 타입을 유지한다.

const v1 = f1(); // v1: void, f1: () => void
 
const v2 = f2(); // v2: void, f2: () => void
 
const v3 = f3(); // v3: void, f3: () => void

 

그러나 유의해야 할 한 가지 다른 경우가 있다. 리터럴 함수 정의가 void 반환값을 가진다면, 그 함수는 어떠한 것도 반환해서는 안된다.

function f2(): void {
  // @ts-expect-error
  return true;
}
 
const f3 = function (): void {
  // @ts-expect-error
  return true;
};