[러닝 타입스크립트] Chapter 5 함수

해리포터·2023년 3월 13일

매개변수의 타입

함수에 전달되는 parameter에도 타입 애너테이션을 사용해서 타입을 선언할 수 있다.

파라미터에 타입을 선언하지 않으면 파라미터의 타입은 암시적으로 any 가 된다. 명확하게 파라미터의 타입을 선언하면 오류를 줄일 수 있다.

function sayHello(name: string) {
	console.log(`Hello, ${name}.`);
}

필수 매개변수(required parameter)

function sayHello(name: string) {
	console.log(`Hello, ${name}.`);
}

sayHello('Harry', 30); // ❌ Expected 1 arguments, but got 2.
sayHello(123); // ❌ Argument of type 'number' is not assignable to parameter of type 'string'.

타입스크립트에서는 함수 선언에서 사용된 모든 매개변수(parameter)가 필수 매개변수로 사용된다.
함수를 호출할 때 전달되는 인수(argument)의 숫자와 함수를 정의할 때 선언된 매개변수의 숫자 및 타입은 일치해야 한다. → 타입 안정성 강화
필수 매개변수는 함수 호출 시 반드시 인수로 전달되어야 한다.
만약 함수의 매개변수에 필수 매개변수와 선택적 매개변수 둘 다 있다면, 필수 매개변수가 선택적 매개변수보다 먼저 위치되어야 한다. (순서가 바뀌면 안된다)

선택적 매개변수(optional parameter)

function 함수(필수파라미터: string, 선택적파라미터?: string | undefined) {
	// ...
}

말 그대로 있어도, 없어도 되는 매개변수일 경우 (또는 undefined 값이 필요해서 의도적으로 사용할 경우) 파라미터 뒤에 ? 를 사용하여 선택적 매개변수임을 표시한다.
선택적 매개변수에는 undefined 타입이 유니언 타입에 포함되어 사용된다. 선택적파라미터?: 내가지정한타입 | undefined
선택적 매개변수는 함수 호출 시 인수로 전달되어도, 안되어도 함수는 작동한다.

기본 매개변수(default parameter)

default 값이 있는 매개변수로, default 값은 = 를 사용해서 나타낸다.
```
function 함수(파라미터1: string, 파라미터2 = 0) {
	// ...
}
```
- 매개변수에 타입 애너테이션이 없을 경우, 타입스크립트는 선언된 default 값을 토대로 파라미터의 타입을 추론한다.
  - 위의 예시에서 파라미터2의 default 값이 0 이기 때문에, 타입스크립트는 파라미터2의 타입을 number 로 추론한다.
  - 그러나 함수를 호출할 때는 추론된타입 | undefined 가 된다.
```
function 함수(파라미터1: string, 파라미터2 = 0) {
	// ...
}

함수('string', '123'); // ❌ 두 번째 인수의 타입은 number 또는 undefined이어야 한다.
```

나머지 매개변수(rest parameters)

function 함수(파라미터1: string, ...나머지파라미터: string[]) {
	// ...
}

스프레드 연산자(…)를 사용한 나머지 매개변수는 함수 선언 시 가장 마지막 매개변수의 자리에서 사용
배열임을 나타내기 위해 타입 애너테이션의 마지막에 []를 추가해서 표기

반환 타입

function addTwoNumbers(number1: number, number2: number): number {
	return number1 + number2;
}

변수, 매개변수와 마찬가지로 함수의 리턴 값에도 타입을 선언할 수 있다.

함수 타입

콜백 함수(함수로 호출되는 매개변수)에 함수 타입을 주로 사용한다.
화살표 함수와 비슷
- 화살표 함수는 화살표(=>) 다음 함수의 본문이 나오지만, 함수 타입에서는 화살표 다음에 타입이 있다.

let twoNumbers: (num1: number, num2: number) => number;

변수 twoNumbers에는 함수가 할당된다
- 그 함수는 number 타입의 두 개의 파라미터를 받고,
- number 타입의 값을 리턴한다.

함수에도 type alias를 사용할 수 있다.

반복적으로 매개변수와 리턴 타입을 작성하지 않아도 된다 👍

type TwoNumbers = (num1: number, num2: number) => number;
let twoNumbers: TwoNumbers;

twoNumbers = (num1, num2) => num1.concat(num2); // ❌ Property 'concat' does not exist on type 'number'.

그 외 반환 타입 (void, never)

void 반환 타입

return 문이 없을 때 또는 어떤 값도 반환하지 않을 때

console.log → 아무것도 리턴하지 않는다.

function 공허의지팡이(cost: number): void {
	console.log(`공허의지팡이의 가격은 ${cost}골드 입니다.`);
}

void 반환 타입을 사용하면 함수에서 리턴되는 모든 값이 무시된다.
void != undefined

never 반환 타입

무한 루프일 경우 사용
의도적인 에러를 발생시킬 경우 사용

void 와 never 는 달라요!

void ≠ never

void 는 아무것도 반환하지 않는 함수에 사용하고,
never는 절대 반환하지 않는 함수에 사용한다.

함수 오버로드

이전 글 참고 ([TypeScript] 함수 오버로드)

함수 오버로드는 전달받은 매개변수의 개수나 타입에 따라 다른 동작을 하게 하는 것을 의미한다.
- 매개변수의 개수나 타입에 따라서 함수가 다르게 동작해야 하는 경우에 함수 오버로드를 사용
컴파일 후 오버로드 시그니처는 생략되고, 구현 시그니처만 남게 된다.
함수 오버로드는 어쩔 수 없이 아주 복잡한 함수의 경우에만 사용하는 것이 좋다.
- 가급적으로 함수는 간단하게 만들어야 한다. 한 가지 일만 할 수 있도록!