TypeScript 변수 선언6 - function(함수), 변수 선언 및 에러

 안녕하세요. 이번에는 이전시간때 배웠던 함수를 사용할때 발생할수 있는 오류와 이를 해결하는 방법에 대해서 알아보겠습니다.

// 2개의 수를 받아서 합친 값을 return 한다.

function addTwoNumber(num1 : number, num2 : number) : number{

let result : number;

result = num1 + num2;

return result;

}

// 한개의 숫자를 받아서 "Result : [num]"으로 출력

function printString(num : number) : string{

console.log("Result : ", num);

return ("Result : " + String(num));

}

// addFunction을 선언한다.

let addFunction;

// addFunction에 addTwoNumber를 지정한다.

addFunction = addTwoNumber;

console.log(addFunction(3,4)); // 7로 정상출력

위 코드는 2개의 간단한 함수와 addFunction이라는 변수를 사용하는 예제입니다. 위 예제에서 addFunction은 addTwoNumber로 선언이 되고 2개의 인자가 입력되면 정상적으로 결과가 나오는 것을 알수 있습니다. 

// addFunction을 선언한다.

let addFunction;

// addFunction에 addTwoNumber를 지정한다.

addFunction = addTwoNumber;

addFunction = 5; // 에러발생 : number 5로 선언

console.log(addFunction(3,4)); // 에러 발생

이제 'addFunction = addTwoNumber;' 아래쪽에 코드를 하나 더 추가하자. 위 코드에서 문제는 'addFunction = 5'부분이다. 이는 다음줄에 addFunction(3,4)부분에서 인자가 들어가면 안되는데 들어가서 문제가 생긴다. 하지만 TypScript에서는 에러 표시가 나지 않는다.

그 이유는 TypeScript에서 addFunction이 함수(function), 숫자(number) 또는 문자(string)로 등등 정의를 하지 않았기 때문입니다. 그래서 TypeScript입장에서는 addFunction에 함수가 들어와도 다음에 다른 변수(여기서는 number)가 들어와도 에러 표시가 나지 않습니다. 

이제 위 코드에서 addFunction이 Function으로 지정이 되자 addFunction = 5; 부분에서 에러가 감지 됬습니다. 이것으로 TypeScript는 함수가 아닌 값이 addFunction에 들어갈 경우 에러처리를 하게 됩니다. 

// 2개의 수를 받아서 합친 값을 return 한다.

function addTwoNumber(num1 : number, num2 : number) : number{

let result : number;

result = num1 + num2;

return result;

}

// 한개의 숫자를 받아서 "Result : [num]"으로 출력

function printString(num : number) : string{

console.log("Result : ", num);

return ("Result : " + String(num));

}

// addFunction을 선언한다.

let addFunction : Function; // Function으로 지정함

// addFunction에 addTwoNumber를 지정한다.

addFunction = addTwoNumber;

addFunction = printString; // 에러발생 : 인자갯수가 다른 printString지정

console.log(addFunction(3,4)); // 에러 발생

이번에는 TypScript에서 감지하지 못하는 다른 에러 입니다. 분명 addFunction에 함수들만 정의 되지만 'addFunction = printString;'부분은 인자를 1개 받는 함수 입니다. 하지만 함수이기 때문에 TypeScript는 넘어가게 되고 console.log에서 결국 숫자 3만 출력됩니다.

이제 TypeScript에서 함수임에도 불구하고 잘못된 부분을 잡은것을 확인할수 있습니다. 위사진 21번째 줄에서 Arraw Function을 이용하여 인자는 2개 받아야 하며 모두 number속성을 가져야 합니다. 그리고 출력된 return값 또한 number가 되어야 합니다. 이 것을 모두 충족하는 함수는 addTwoNumber이며 printString는 충족되지 않기 때문에 에러표시가 난 것입니다.