typescript 함수 반환 type

함수 반환 type

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

add(): number 통해서 함수 반환 type을 구체적으로 설정할 수 있다.
만약 함수 뒤 나올 수 없는 type을 적어줄 경우 compile 실패한다.

함수 반환 type 존재하는 이유는 javascript에 없는 void type 때문이다.

function printResult(num: number){
	console.log("Result: " + num);
}
// 위 함수가 void type이다.
// javascript에서 문자열 + 숫자는 문자열 반환이다. 
// 하지만 typescript를 통해서 함수 반환 type을 설정할 수 있고, 원하는 결과를 얻을 수 있다.

printResult(add(5, 12));

주의 사항으로 함수 반환 시 undefined를 설정할 수 없다. (물론 설정 후 return; 만 적어줄 경우 사용할 수 있다. 하지만 정상적인 코드를 작성할 때 반환값을 undefined 얻을일이 없다.)

type 기능을 하는 함수

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

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

printResult(add(5, 12));

let combineValues: Function;

combineValues = add;
// combineValues = 5;
// 5라는 적어도 compile은 작동한다. 하지만 console.log(combine...)에서 에러를 발생시킨다.

console.log(combineValues(8, 8));
// 잘 보면 combineValues()를 통해 add를 함수로 만들고 16을 반환하게 만들어준다.
// 하지만 combineValues type값을 any로 설정된 상태다.

combineValues = 5 라는 값때문에 함수가 망가질 수 있기 때문에 combineValues를 함수로서 맞는 기능을 할 수 있게 만들려면, let combineValues: Function; 을 통해 함수만 받아올 수 있게 만든다. Function type 설정 후 let combineValues = 5; 을 막을 수 있다.

함수 type 및 callback

function addAndHandle(n1: number, n2: number, cb: (num: number) => void){
	const result = n1 + n2;
    cb(result);
}

// 위 코드로 인해 result 값을 1개 이상의 값이 올 수 없다.
addAndHandle(10, 20, (result) => {
	console.log(result);
});
// 결과는 30이다.

위와 같이 코드를 작성하면 cb는 number를 반환하고 number를 반환할 수 없을 때 void 값을 반환한다.

결론

함수type은 함수의 매개변수 및 반환 type을 정의합니다.