반환타입

Typescript에서는 함수의 반환 타입을 정할 수 있다. 사진을 보면

함수에 타입주기

코드와 사진

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

위 코드의 반환타입은 number 타입니다.

그러나 반환타입을 설정하면 다음과 같이 변경할 수 있다.

add 함수의 string 타입을 줘서 number는 반환할 수 없고, string 타입만 반환할 수 있게 했다. 이를 반환하기 위해서는 toString() 메서드를 이용해서 n1과 n2를 string 타입으로 바꿔줘야 한다.

void 타입

Javascript에서는 void 타입이 생소할 수 있다. 사용되지 않는 함수이기 때문이다. void 타입은 반환값이 없다는 뜻이다.

그래서 함수를 호출하면 반환값이 없이 끝이다.

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

printNum(add(2, 3)); // Result : 5가 콘솔에 출력

이런 식으로 사용이 된다.

함수 타입

변수에 함수 타입도 줄 수 있다.

let combineValues: Function;
combineValues = add;

combineValues(2, 3); // 5

이런 식으로 설정하면 combineValues는 함수가 되어 예시와 같이 사용할 수 있다. 또한,

사진처럼 사용되기도 하는데 number 타입의 매개변수 2가지를 갖고 number타입을 반환한다고 설정하면 그와 맞는 함수만 정의가 가능하다. 그렇지 않으면 사진처럼 에러가 발생한다.

콜백함수

함수에 콜백함수를 넣어서 다음과 같이 사용할 수 있다.

function addAndHandler(n1: number, n2: number, cd: (result : number) => void) {
    const result = n1 + n2;
    cd(result);
}

addAndHandler(5, 10, (result) => {
    console.log(result); // 15
})

콜백함수는 number 타입을 매개변수로 받고 void타입을 반환한다. 그래서 addAndHandler를 호출하면 15가 콘솔에 출력된다.

사진처럼 addAndHandler 함수는 void 타입을 갖는다.

정리하기

이번 공부를 통해 기본적인 Typescript의 타입들에 대해 공부했다. 공부를 하면서 Typescript에 대한 생각은 확실하게 정의를 하고 간다는 느낌이다. 그래서 착오가 없이 단단히 돌다리를 두들기고 간다는 느낌을 받았다.

오늘 배운 내용들은 지난번에 배운 Union이나 Tuple, Enum 등과 같이 함께 쓰이면 좋은 협업을 할 수 있을 거란 생각이 든다. 그렇기 때문에 기초를 확실하게 해둘 필요가 있다.