[TypeScript] 함수 타입 표현식과 호출 시그니쳐

🍪 함수 타입 표현식

함수 타입을 타입 별칭과 함께 별도로 정의할 수 있다. 

type Add = (a:number, b:number) => number;
const add:Add = (a, b):number => a+b;

함수 타입 표현식을 이용하면 함수 선언 및 구현 코드와 타입 선언을 분리할 수 있어 유용하다.

 

여러개의 함수가 동일한 타입을 갖는 경우 함수 표현식을 이용해 간결하게 표현할 수 있다.

// 함수 타입 표현식을 사용하면 좋은 예
// 여러개의 함수가 동일한 타입을 갖는 경우
type Operation = (a:number, b:number) => number;

const add:Operation = (a,b) => a+b;
const sub:Operation = (a, b) => a-b;
const multiply:Operation = (a, b) => a*b;
// 함수 타입 표현식이 반드시 타입 별칭과 함께 사용되어야 하는 것은 아님
// 타입 주석에 사용해도 문제 없음
const divide:(a:number, b:number) => number = (a, b) => a/b;

나중에 동일한 타입의 함수가 추가되어도 타입 주석을 이용해 타입 정의만 해주면 되어 매우 편리하다.

함수 타입 표현식이 반드시 타입 별칭과 함께 사용되어야 하는 것은 아니므로 함수 타입 표현식을 타입 주석에 사용해도 문제가 되지 않는다.

 

 

 

🍪 호출 시그니쳐

호출 시그니쳐(콜 시그니쳐)는 함수 타입 표현식과 동일하게 함수의 타입을 별도로 정의하는 방식이다.

type Operation2 = { // 자바스크립트에서 함수도 객체이기 때문에 객체를 정의하는 방법과 동일하게 정의
  (a: number, b: number): number;
};

const add2: Operation2 = (a, b) => a + b;
const sub2: Operation2 = (a, b) => a - b;
const multiply2: Operation2 = (a, b) => a * b;
const divide2: Operation2 = (a, b) => a / b;

객체를 정의하는 것처럼 {}를 사용하는 이유는 자바스크립트에서는 함수도 객체이기 때문이다. 따라서 객체를 정의하는 방법과 동일하게 함수의 타입을 정의한다.

 

추가로 호출 시그니쳐 아래에 프로퍼티를 추가로 정의하는 것이 가능하다.

이렇게 할 경우 함수이자 일반 객체를 의미하는 타입으로 정의되므로 함수 호출과 객체의 프로퍼티에 접근하는 것이 가능하다.

이를 하이브리드 타입이라고 부른다.

type Operation2 = { 
    (a: number, b: number): number;
    // 하이브리드 타입
   // 호출 시그니쳐를 이용할 때, 객체에 프로퍼티를 추가로 정의할 수 있음 -> 함수도 객체이기때문
   name: string;
};

const add2:Operation2 = (a,b) => a+b;
// 함수처럼 호출 가능
add2(1, 2);

// 점 표기법으로 프로퍼티에 접근할 수 있음
add.name;

 

 

---

🔗 타입스크립트 강의

한 입 크기로 잘라먹는 타입스크립트 - 인프런 | 강의