[TS] 함수, 함수 타입 표현식과 호출 시그니처

함수 타입

💡함수를 설명하는 가장 좋은 방법

JS - 어떤 매개변수를 받고 어떤 결과값을 반환하는 지 이야기
TS - 어떤 [타입의] 매개변수를 받고, 어떤 [타입의] 결과값을 반환하는 지 이야기

// 함수 타입 정의
function func(a: number, b: number): number {
  // 반환값의 타입은 없어도 추론 가능
  return a + b;
}

// 화살표 함수의 타입을 정의하는 방법
const add = (a: number, b: number): number => a + b;

 

1️⃣함수의 매개변수

function introduce1(name = "안수이", tall: number) {
  console.log(`name: ${name}`);
  console.log(`tall: ${tall}`);
}

introduce1("안수이", 180);

// 매개변수를 모두 넣지 않아서 오류 발생
introduce1("안수이");

// ?를 붙여서 해결
function introduce2(name = "안수이", tall?: number) {
  console.log(`name: ${name}`);
  console.log(`tall: ${tall}`);
}

introduce2("안수이");

 

2️⃣선택적 매개변수의 존재

❗선택적 매개변수는 필수 매개변수보다 뒤에 있어야 한다.

// tall이 undefined 일 수도 있어 오류 발생
function introduce3(name = "안수이", tall?: number) {
  console.log(`name: ${name}`);
  console.log(`tall: ${tall + 10}`);
}

// typeof로 해결
function introduce4(name = "안수이", tall?: number) {
  console.log(`name: ${name}`);
  if (typeof tall === "number") {
    console.log(`tall: ${tall + 10}`);
  }
}

// 선택적 매개변수가 필수 매개변수보다 앞에 있어 오류 발생
function introduce5(name = "안수이", tall?: number, age: number) {
  console.log(`name: ${name}`);
  console.log(`tall: ${tall}`);
}

// 해결
function introduce6(name = "안수이", age: number, tall?: number) {
  console.log(`name: ${name}`);
  console.log(`tall: ${tall}`);
}

 

3️⃣ 매개변수의 개수 - ...rest 배열, 튜플

// 매개변수의 개수에 상관없이 모두 더해서 반환
// ...rest: 가변적인 개수의 변수를 배열로 묶어서 rest에 넣어준다.
function getSum(...rest: number[]) {
  let sum = 0;
  rest.forEach((it) => (sum += it));
  return sum;
}

// 매개변수의 개수를 정하고 싶으면 튜플 타입 선택
function getSum2(...rest: [number, number, number]) {
  let sum = 0;
  rest.forEach((it) => (sum += it));
  return sum;
}

getSum2(1, 3, 4); // 3개만 입력 가능

 

---

함수 타입 표현식

비슷한 형식의 함수를 여러개 만들 때 편리하다.

// 기존 함수
const addNum = (a: number, b: number): number => a + b;

// 함수 타입을 이용한 함수
type Calculation = (a: number, b: number) => number;
const add: Calculation = (a, b) => a + b;
const sub: Calculation = (a, b) => a - b;
const multiply: Calculation = (a, b) => a * b;
const divide: Calculation = (a, b) => a / b;

 

호출 시그니처

// 호출 시그니처 (콜 시그니처)
type Calculation2 = {
  (a: number, b: number): number;
};

function func(a: number): void {}

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

---

이정환님의 인프런 강의 "한 입 크기로 잘라 먹는 타입스크립트(TypeScript)"를 참고하여 작성하였습니다.