[TypeScript] 함수(function)에 대해서 알아보자!

 

함수에 대해서 알아보도록 하자.

function add(a: number, b: number):number {
  return a + b;
}

위 코드와 같이 add의 함수가 있습니다. 이 함수를 좀 더 간단하게 줄일 수 있습니다.

※ return 값의 타입인  number 은 생략이 가능합니다.

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

위 코드와 같이 함수(=>)를 활용하여 좀 더 간단하게 함수를 줄일 수 있습니다.

만약 number 같이 중복되는 함수들이 많아진다면 number를 굳이 쓰지 않고 생략하는 방법은 없을까요?

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

위 코드와 같이 type Add를 만들어 함수를 많이 만들때 효율적으로 활용할 수 있습니다.

 

이제 오버로딩에 대해서 공부해보자

오버로딩이란 무엇인가?

1) 동일한 이름에 매개 변수만 다른 여러 버전의 함수를 만드는 것

2) 파라미터의 형태가 다양한 여러 케이스에 대응하는 같은 이름을 가진 함수를 만드는 것

3) 함수의 다형성을 지원하는 것

type Config = {
  path: string;
  state: object;
};

type Push = {
  (path: string): void; // void는 리턴하지 않는다.
  (Config: Config): void;
};

const push: Push = (config) => {
  if (typeof config === "string") {
    console.log(config);
  } else {
    console.log(config.path);
  }
};

위 코드처럼 오버로딩할때는 config 변수의 타입이 string인지 Config인지 체크를 해야할 필요가 있습니다.

type Add = {
  (a: number, b: number): number;
  (a: number, b: number, c: number): number;
};

const add: Add = (a, b, c?: number) => {
  if (c) return a + b + c;
  return a + b;
};

add(1, 2);
add(1, 2, 3);

위 코드처럼 매개변수가 매개변수의 개수가 다를때에는 조건문을 걸어주어 c가 있을때와 없을때에 따라 return 값을 달리 배출합니다.