[TypeScript] 타입스크립트 함수 타입 표현식

1. 함수 타입 표현식

type Calc = (a: number, b: number) => number;

// 1
const add: Calc = (a, b) => a + b; 
// 2
const add: Calc = (a:number, b:number):number => a + b;
// 3
const add = (a:number, b:number):number => a + b;
// 4
const add: (a: number, b: number) => number = (a, b) => a + b;

 

Calc 이라는 타입은

"두 개의 number 인자를 받아 number를 반환하는 함수" 를 의미합니다.

1, 2, 3번이 각각 어떤 차이가 있는지 보겠습니다.

 

1번은 Calc 타입을 지정했기 때문에 a, b는 자동으로 number 타입으로 추론됩니다.

결과도 number로 추론되므로 반환 타입은 따로 쓰지 않아도 됩니다.

가장 많이 쓰이는 방식입니다.

 

2번은 Calc 타입을 지정했지만 인자와 반환 타입을 명시적으로 한 번 더 썼습니다.

불필요하지만 코드를 읽는 사람이 이해하기 쉽게 하려면 쓸 수 있습니다.

 

3번은 별도 타입이 없기 때문에 타입을 명시했습니다.

 

4번처럼도 쓸 수 있습니다. 4번은 1번의 타입 주석을 풀어 썼습니다.

 

1-1. 하이브리드 타입

Calc타입에 id라는 프로퍼티를 추가 정의했습니다.

이를 하이브리드 타입이라고 합니다.

type Calc = {
  (a: number, b:number): number;
  id: string
}

const add: Calc = (a, b) => a + b;
❌ Property 'id' is missing in type '(a: number, b: number) => number' but required in type 'Calc'

add.id

 

근데 add 에서는 에러가 납니다.

type Calc = {
  (a: number, b:number): number;
  name: string
}

const add: Calc = (a, b) => a + b;
// 에러 없음
add.name

 

(a, b) => a + b

는 함수만 정의했지 id 속성이 없기 때문입니다.

 

하지만 name으로 바꿨을 때는 오류가 나지 않죠.

함수에 기본적으로 name이라는 속성(빌트인)이 있기 때문에 오류가 나지 않습니다.

 

// 1. 함수를 먼저 변수에 넣고 속성 추가
const add = ((a: number, b: number) => a + b) as Calc;
add.id = "plus";

// 2. 함수를 객체처럼 정의해서 id 속성 포함
const add: Calc = Object.assign(
  (a: number, b: number) => a + b,
  { id: "plus" }
);

 

위 처럼 바꾸면 id 값을 쓸 수 있습니다.