함수 타입

함수 타입은 매개변수와 반환 값의 타입을 포함해서 함수를 정의한다.

타입스크립트에서는 함수의 매개변수에도 타입을 지정할 수 있고, 함수가 반환하는 값에도 타입을 지정할 수 있지만, 함수 자체의 타입도 지정할 수 있다.

함수 타입 사용 방법

변수: (매개변수의 타입) => 반환값의 타입

// 예시
let combineValues: (a:number, b:number) => number;

위의 코드의 뜻을 풀이하면 아래와 같다.

• 변수 combineValues의 타입은 함수이고, 어떤 함수이냐 하면
• number 타입의 매개변수 2개를 받아서
• number 타입의 값을 반환하는 함수이다.

즉, 정리하자면:

화살표 함수 (매개변수의 타입) => 타입

함수 타입은 `어떤 타입을 가진 매개변수를 받아 어떤 타입의 값을 반환하는지를 말한다.

함수 타입에서 지정한 조건을 벗어난 함수가 할당되면 타입스크립트는 에러를 발생시킨다.

어떤 상황에서 함수 타입이 유용한지 아래의 예시를 통해 알아보자.

잘못된 예시

function add(n1: number, n2: number) {
	return n1 + n2;
}

let combineValues;

combineValues = add; 
combineValues = 5;

왜 잘못된 예시일까? 문제점!

이 코드의 문제점은 combineValues 라는 변수에 처음에 함수가 할당이 되었고, 이후 숫자가 할당이 되었는데도 컴파일 할 때는 에러가 발생하지 않는다.

문제의 이유

그 이유는 let combineValues; 라고만 명시하면 combineValues의 타입은 any가 되기 때문이다!!
하지만 자바스크립트에서 런타임 에러가 발생하는 오류가 있다.

올바른 예시

function add(n1: number, n2: number) {
	return n1 + n2;
}

function printResult(num: number): void {
	console.log('Result is: ' + num);
}

// ✨ 함수타입 지정
let combineValues: (a: number, b: number) => number;

// 변수에 함수를 할당해서 해당 함수를 가리킬 수 있다.
combineValues = add; // ⭕️ 작동: 함수 add는 숫자타입을 가진 매개변수 2개를 받아 숫자타입의 값을 리턴하는 함수이기 때문에 combineValues의 조건과 일치한다.

combineValues = printResult; // ❌ 에러: printResult는 함수이긴 하지만 숫자 타입의 매개변수가 1개 뿐인데다, 반환값이 없으므로(void) combineValues의 조건과 맞지 않는다.

combineValues = 5; // ❌ 에러: combineValues는 함수 타입이여야 한다. 

예시와 같이 변수에 함수 타입을 지정하면, 조건과 맞지 않는 함수가 해당 변수에 잘못 할당이 되었을 때 에러를 발생시킨다.