현재까지는 함수의 매개변수에 자료형을 지정하는 작업을 통해 함수를 이용해 보았습니다 이제 아래의 함수를 통해 다른 작업을 해볼까요?
function add(n1: number, n2: number) {
return n1 + n2;
}
여기까지는 이제 전에 공부해보았던 함수의 형태와 동일할 것입니다.하지만 이제는 반환되는 값의 자료형을 지정해 볼 수 있습니다. 물론 타입 추론을 통해 지정해 주지 않는 경우도 있지만 만약 명시적으로 반환되는 값을 문자열로 지정을 한다면, 바로 에러를 만날 수 있습니다
function add(n1: number, n2: number) :string {
return n1 + n2; //number을 sting에 할당할 수 없다는 에러를 만나게됩니다
}
function add(n1: number, n2: number) {
return n1 + n2;
}
function printResult(num: number) {
console.log("result :" + num);
}
console.log(printResult(add(2, 5)));
현재 위의 printResult는 add라는 함수를 인자로 넘겨 받아 최종 합을 출력해주는 함수입니다 결과 값은 그러면 어떤 자료형일까요? 아마 문자열로 시작하니, 문자열이지 않을까 하는 생각이 들지도 모르겠지만, 여기서는 아무것도 반환하지 않아 void라는 자료 형을 얻게 됩니다.
여기서 void는 함수에서 반환되는 값이 없음을 의미합니다. 그렇다면 undifined
와 void
는 어떤 차이가 있을까요? undefined
는 역시 ts 에서는 자료형으로 사용되게 됩니다, 일단 존재 하는 값이니까요
<aside> 💡 void!== undefined , undefined는 실제로 값이 undefined이 나오는 경우를 이야기합니다.void는 반환문이 없는 경우를 이야기합니다
</aside>
let combineValue;
combineValue = add;
console.log(combineValue(8, 8));
현재 위의 함수는 이전에 만들어준 add 라는 함수를 변수에 할당해 주었습니다. 그런데 현재 타입스크립트의 관점으로 보자면 combineValue라는 값의 자료형이 any라는 것이 조금 애매할 것입니다. 특히 let으로 선언되어 있고 any의형태 이므로, 결국 어떤 것을 할당해 주어도컴파일시 에러 없이 무사히 진행 될 것이라는 위험성이 생길수도 있죠.
let combineValue: Function;
combineValue = add;
console.log(combineValue(8, 8));
그래서 이제 위와같이 함수라는 타입을 선언해 줄 수 있습니다. 그런데 여기서 실수로 다른 함수를 지정하게 된다면 또 문제가 발생할 수 있습니다. 만약 숫자를 결과로 얻고 싶은데, 문자열을 출력하거나 반환하는 함수를 지정한다면 어떻게 될까요? 타입스크립트는 이미 함수를 타입을 선언해 주었기 때문에, 문제 없이 컴파일 할 것입니다. 물론 런타임에서 오류가 발생하겠지만요
그래서 위의 문제를 해결하기 위해서 함수 타입을 지정해 주어야 합니다. 함수 타입은 아래와 같은 형태를 지니고 있습니다
let combineValue: (a: number, b: number) => number;
변수 명: (인자)⇒ 결과혹은 반환되는 값의 타입 을 작성하도록 되어있죠. 그래서 위의 함수를 다시 작성해 보면 아래와 같은 형태가 될것 입니다
let combineValue: (a: number, b: number) => number;
combineValue = add;
//combineValue=printResult : void 타입, 인자가 1개이므로 수용이 어렵다는 에러를 받게 됩니다
console.log(combineValue(8, 8));
이제 void
타입을 반환해 주는 함수를 할당하는 경우에는, 위와같은 에러를 만나게 될 것입니다.