함수 타입은 매개변수와 반환 값의 타입을 포함해서 함수를 정의한다.
타입스크립트에서는 함수의 매개변수에도 타입을 지정할 수 있고, 함수가 반환하는 값에도 타입을 지정할 수 있지만, 함수 자체의 타입도 지정할 수 있다.
변수: (매개변수의 타입) => 반환값의 타입
// 예시
let combineValues: (a:number, b:number) => number;
위의 코드의 뜻을 풀이하면 아래와 같다.
함수
이고, 어떤 함수이냐 하면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는 함수 타입이여야 한다.
예시와 같이 변수에 함수 타입을 지정하면, 조건과 맞지 않는 함수가 해당 변수에 잘못 할당이 되었을 때 에러를 발생시킨다.