TypeScript | Return 타입 명시, Function 타입 명시, 콜백함수 타입 명시

Return 타입 명시

매개변수 받는 괄호 오른쪽에 콜론(:) 찍고 return 타입 명시 가능.

// 올바른 return 타입 설정
const combine = (arg1: number, arg2: number): number => {
    return arg1 + arg2
}

// 에러
const combine = (arg1: number, arg2: number): String => {
    return arg1 + arg2
}

console.log(combine(1, 2))

 

 

void 타입

자바 등 다른 프로그래밍 언어에는 있는 반환타입이다. 자바스크립트에는 void가 없었지만 타입스크립트에서 추가되었다.

void는 return 값이 없는 경우이다.

// void 타입 - return 값이 없음 (엄밀히 말하면, 기술적으로는 undefined 리턴)
const printSum = (arg1: number, arg2:number): void => {
    console.log(arg1 + arg2)
}

 

만약 이를 억지로 console.log로 찍어보면 undefined 값을 반환한다.

즉, 기술적으로 보면 아무것도 반환하지 않는 것은 아니고, JS의 데이터타입인 undefined를 반환하는 것이다.

 

사실 undefined 자체도 리턴타입으로 지정할 수 있기 때문에 개발자로 하여금 헷갈리게 하는 포인트이다. 차이점이 있다면, undefined를 리턴으로 넣고 싶으면 빈 return을 반환하는 경우에 사용하면 된다는 것.

 

void는 명시적으로 '이 함수에는 return 자체가 없어요.' 를 나타내는 거고, undefined는 '그냥 return만 해요'를 나타내는 것이라 볼 수 있다.

// undefined 타입 - 빈 return일 때
const printMinus = (arg1: number, arg2: number): undefined => {
    console.log(arg1 - arg2)
    return
}

printMinus(6, 3)

 

 

Function 타입 명시

함수에 대한 포인터를 특정 식별자에 넣어놓고 재활용하는 경우가 생길 수도 있는데, TS에서는 함수 타입도 지원한다.

예를 들어 '이 식별자에 어떤 함수 포인터를 할당할지는 모르겠지만, 매개변수는 이 타입 이 타입 들어와야하고, return 값은 저 타입으로 줄 거에요.' 라고 미리 명시하는 것이다.

 

// Function 타입 지정하기
let combineValues: (arg1: number, arg2: number) => number // function 타입 지정

const combineNumbers = (arg1: number, arg2: number): number => arg1 + arg2
combineValues = combineNumbers // 타입 에러 안남
console.log(combineValues(1, 2)) // 3

const combineString = (arg1: String, arg2: String): String => `${arg1}${arg2}`
combineValues = combineString // 타입 에러 발생
console.log(combineValues('Hello', 'World')) // 컴파일 에러. but 실행은 됨. ('HelloWorld')

 

 

 

콜백에 대한 타입 명시

콜백함수에 대해서도 타입 지정을 미리 할 수 있다.

// 매개변수 타입 지정 - 콜백에 대한 타입 지정
const doSomething = (arg1: number, arg2: string, cb: (cbArg1?: string) => void): string =>{
    cb()
    const result: string = arg1.toString() + arg2;
    console.log('doSomething:', result)
    return result
}

const callbackSomething = (cbArg1?: string): void => {
    console.log(cbArg1 + ' World')
}

doSomething(123, 'arg2', () => callbackSomething('Hello')) // 콜백 전달 시엔 익명함수로
/*
출력:
Hello World
doSomething: 123arg2
*/