본문 바로가기
프론트엔드/TS 공부

함수 타입 정의 / 함수 타입 표현식과 호출 시그니처

by 학습하는 청년 2024. 5. 28.

최종 수정 : 2024-05-28

함수 타입 정의

함수를 설명하는 가장 좋은 방법이다.

어떤 매개변수를 받고, 어떤 결과값을 반환하는지 정의할 수 있다.

 

화살표 함수의 타입을 정의하는 방법

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

함수의 매개변수

옵셔널 파라미터(optional parameter)

매개변수의 맨 뒤에 작성하며 선택적으로 사용을 허용한다.그러나 지정한 타입과 undefined가 유니언 타입으로 타입이 설정되므로 타입가드를 통해 구분해줄 필요가 있다. 

function introduce(name = 'yeongtaek', age: number, tall?: number) {
  console.log(`name : ${name}`);
  if (typeof tall === 'number') {
    // 타입 가드를 통해, tall이 number임을 보장하여 덧셈 연산이 가능하도록 만든다.
    console.log(`tall: ${tall + 10}`);
  }
}

introduce('yeongtaek', 33, 177);
introduce('yeongtaek', 33); // tall이 옵셔널 파라미터이므로 가능

 

rest parameter

function getSum(...rest: [number, number, number]) {
  let sum = 0;
  rest.forEach((it) => (sum += it));
  return sum;
}

getSum(1, 2, 3);
getSum(1, 2, 3, 4, 5); // 불가능 - 3개의 인수가 필요한데, 5개를 작성했다.

함수 타입 표현식과 호출 시그니처

함수 타입 표현식

타입 별칭을 통해서도 만들 수 있다.

호출 시그니처 or 함수 시그니처라고 부르지만 공식문서에서는 '함수 타입 표현식'이라 명명한다.

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

const add = (a: number, b: number): number => a + b;
==> 다음과 같이 간결하게 만들 수 있다.
const add: Add = (a, b) => a + b;
// 같은 표현
const add: (a: number, b: number) => number = (a, b) => a + b;

const sub: Operation = (a, b) => a - b;
const multiply: Operation = (a, b) => a * b;
const divide: Operation = (a, b) => a / b;

호출 시그니처(= 콜 시그니처)

함수 타입 표현식과 동일한 기능을 한다. 함수의 타입을 표현하는데, 마치 객체 타입을 정의하듯이 하는 이유는 함수도 객체이기 때문에 가능하다. 또한, 하이브리드 타입이라고 하여, 프로퍼티를 추가할 수 있다. 이것 역시 객체이기 때문에 가능하다. 따라서 함수로도 사용할 수 있고, 객체처럼 점표기법으로 프로퍼티에 접근할 수 있다.

type Operation = {
  (a: number, b: number): number;
  name: string; // 하이브리드 타입
};

const add: Operation = (a, b) => a + b;
const sub: Operation = (a, b) => a - b;
const multiply: Operation = (a, b) => a * b;
const divide: Operation = (a, b) => a / b;

add.name;

 

'프론트엔드 > TS 공부' 카테고리의 다른 글

함수 오버로딩  (0) 2024.05.28
함수 타입의 호환성  (0) 2024.05.28
타입 좁히기 - 타입 가드의 종류  (0) 2024.05.28
타입 단언  (0) 2024.05.28
타입 추론  (0) 2024.05.28

댓글