함수 시그니처를 타입으로 선언하기

함수 시그니처

const runner = () => {
  return ['안유진', '장원영', '레이'].map(
    (x) => `아이브 맴버 : ${x}`,
  );
}

이 함수를 다음과 같이 고칠 수 있다.

type Mapper = (x: string) => string; //map의 시그니처함수 타입

const runner = (callback: Mapper) => {
  return ['안유진', '장원영', '레이'].map(
    callback,
  );
}
// console.log(runner((x) => 1)) //에러 반환 왜냐하면 string반환이기 때문이다.
console.log(runner((x) => `아이브 맴버 : ${x}`))

map의 콜백 함수를 파라미터로 받고 싶다 하면 함수를 type으로 선언하면 된다.

그리고 파라미터로 callback이라는 걸 넘기는데 이 때 타입을 Mapper로 정의한다.
이렇게 되면 해당 시그니처함수만 callback에 넣을 수 있게 된다.
즉
console.log(runner((x,y) => 아이브 맴버 : ${x}))
console.log(runner((x,y) => 1))
console.log(runner(1))
다 에러가 생긴다는 것이다.

마찬가지로 화살표 함수에서도 적용된다.

type MultiplyTwoNumbers = (x:number, y: number) => number;

const multiplyTwoNumbers: MultiplyTwoNumbers = (x,y) => {
  return x+y;
} // 같은 시그니처 함수를 정의하기 때문에 알아서 유추가 된다.

type에 단순히 타입만 선언할 수 있는 것이 아니라 시그니처 함수까지 타입을 만들 수 있어 편하다.

인터페이스로 함수 타입 선언하기

interface IMultiplyTwoNumbers{
  (x: number, y : number): number; //인터페이스에서 화살표대신 콜론을 사용한다
}

const multiplyTwoNumbers3 : IMultiplyTwoNumbers = (x, y) => {
  return x* y;
}

여기서 중요한 것은 인터페이스에서 함수를 정의할 때에는 화살표 대신 콜론을 사용한다는 것이다.