함수의 인수로 콜백 함수 전달

 

콜백 함수 타입 명시

 

const func = (cb: (result: number) => void) =>{
	cb(10)
}

콜백 함수의 타입 명시는 화살표 함수를 사용하여 타입을 명시해 준다. 함수의 타입 명시와 동일하게 콜백 함수의 매개 변수의 타입 명시와 콜백 함수의 반환 타입을 명시해 준다.

 

 

 

참고 사항

 

const handleAdd = (
  num1: number,
  num2: number,
  cb: (result: number) => void
) => {
  const result = num1 + num2;
  cb(result);
};

handleAdd(5, 10, (result) => {
  console.log(result);
});

함수 handleAdd는 매개 변수 num1, num2의 타입이 number 타입으로 명시되어 있고, 매개 변수 cb는 콜백 함수 타입으로 명시되어 있다. 또한 매개 변수 cb는 매개 변수 result가 number 타입으로 명시되어 있으며, return을 사용하여 값을 반환하지 않는다.

 

코드 하단에서 함수 handleAdd를 호출하여 명시된 타입과 일치하는 인수를 전달하고 있기 때문에 타입 에러 발생 없이 정상 작동하고 있다.

 

handleAdd(5, 10, (result) => {
  console.log(result);
  return true; // ?!
});

이때 함수의 호출부를 위와 같이 인수로 전달하는 콜백 함수가 true를 반환하도록 수정해 주었다. 

 

분명 함수 handleAdd의 세 번째 매개 변수의 타입을 명시할 때 return을 사용하여 값을 반환하지 않는 void를 명시해 주었는데, 함수 호출부에서 인수로 전달하는 콜백 함수가 true를 return 하고 있음에도 타입 에러가 발생하지 않는다.

 

 

이는 함수 handleAdd 내부에서 매개 변수 cb에 들어오는 콜백 함수가 return을 사용하는 작업을 하지 않겠다를 의미하기 때문이다.\

 

함수의 호출부에서 콜백 함수에 return을 사용해도 문제가 발생하지 않는다. 함수 handleAdd에서 매개 변수 cb에 전달받는 콜백 함수로 return 작업을 수행하지 않겠다고 void로 명시했기 때문이다.

 

즉, 함수의 매개 변수에서 콜백 함수의 타입을 void로 명시하는 것은 아무것도 반환하지 않는 콜백 함수를 인수로 전달받겠다는 의미가 아니라 단지 콜백 함수가 반환할 수 있는 값을 사용하지 않겠다를 의미하는 것입니다.