함수 반환 타입

함수 반환 타입은 문자 그대로 함수가 리턴(반환)하는 값의 타입을 말한다.

아래와 같이 parameter로 number 타입 을 받는 함수 add가 있다.

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

IDE에서 함수 add 위에 마우스를 hover 하면 이렇게 뜬다.
function add(// 생략): number 로 되어있다.

두 parameter를 받아 덧셈 연산만 하고 그 결과를 반환하는 함수이니, 반환하는 값의 타입은 number 일 것이다.

다시 말해서, 함수 add의 함수 반환 타입 은 number 이다.

함수 반환 타입을 위의 함수에 추가해서 코드를 아래와 같이 작성할 수 있다.

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

함수 반환 타입과, 실제 함수의 결과값의 타입이 다를 때 타입스크립트는 에러를 발생시킨다.

function add(n1: number, n2: number): string { 
  return n1 + n2; // ❌ 에러 발생
}

함수 반환 타입이 유용할 때?

함수 반환 타입은 함수가 복잡한 경우에 용이하게 사용된다.
예를 들어, 다른 사람이 코드를 이해/파악하기 쉽도록 해당 코드 작성자가 함수 반환 타입을 사용할 수 있다.

void

void 는 '빈 공간, 아무것도 없다'라는 의미를 가진 단어이다.
함수가 아무것도 반환하지 않을 때 사용한다.
즉, return 이 없을 때 사용한다.
아무것도 반환하지 않는 함수는 void 타입을 가지고, void 타입인 함수는 undefined를 리턴한다.

아래와 같이 아무것도 반환하지 않고, 단지 console.log 를 수행하는 함수가 있다.

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

IDE에서 printResult 위에 마우스를 hover하면, 타입스크립트는 함수 printResult의 타입이 void라고 한다.

아무것도 반환하지 않는 함수의 타입으로 undefined를 지정하지 않는 이유?

undefined는 TypeScript의 타입 중 하나로, void와 다르다.

둘의 차이점을 간략하게 말하자면,

• undefined는 return 문이 있어야 하고,
• void는 return 문이 필요 없다. (아무것도 반환하지 않기 때문에)

따라서 아래의 예시와 같이, 아무것도 return 하지 않는 경우에는 undefined 타입을 지정하면 타입스크립트는 에러를 발생시킨다!

function printResult(num: number): void { // ⭕️ 작동
	console.log('Result: ' + num);
}

function printResult(num: number): undefined { // ❌ 에러
	console.log('Result: ' + num);
}

// undefined를 지정해서 에러가 발생하지 않게 하려면 return을 해야한다!
function printResult(num: number): undefined { // ⭕️ 작동
	console.log('Result: ' + num);
  	return;
}