[TS기초]함수 타입

목차

1.함수 타입정의하기

2.매개변수 속성

3.함수 오버로딩

 

---

1.함수 타입 정의하기

1️⃣함수 선언문

const func(a:number,b:number){
  return a+b; //리턴값을 자동으로 추론
}

2️⃣화살표 함수 

const add = (a:number,b:number):number =>a+b;
//마찬가지로 리턴값을 자동으로 추론하기 때문에 아래와 같이 작성 가능
const add = (a:number,b:number)=>a+b;

3️⃣타입 별칭

-함수 타입 표현식(Function Type Expression)

함수를 타입으로 정의해서 사용한다. 화살표 함수와 문법적으로 유사하다. 

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: Operation = (a, b) => a / b;

-호출 시그니처(Call Signature)

자바스크립트에서 함수는 객체로 취급된다. 그래서 프로퍼티도 가질 수 있다.

함수 타입 표현식에서는 프로퍼티를 정의하는것을 허용하지 않는다. 

호출 시그니처를 사용하면 객체 타입에 호출시그니처를 사용하여 표현할 수 있다.

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: Operation = (a, b) => a / b;

 

 

2.매개변수의 속성

1️⃣매개변수의 기본 값

function introduce(name = "이름"){
  console.log(`name : ${name}`);
}

매개변수의 기본값을 설정해주면 기본값을 추론하여 타입을 지정할 수 있다.

 

2️⃣선택적 매개변수

객체타입에서 선택적인 프로퍼티를 갖을 수 있었다. 

마찬가지로 함수에서도 ?를 사용하여 선택적인 매개변수를 갖을 수 있다.

function introoduce(name = "이름", tall?: number) {
  console.log(`name:${name}`);
  if (typeof tall === "number") {
    console.log(`tall : ${tall}`);
  }
}

주의해야할 점은 선택적 매개변수는 필수 매개변수 앞에오면 안된다.

이렇게 선택적 매개변수 뒤에 필수 매개변수가 온다면 에러가 발생한다. 

 

3️⃣레스트 파라미터(Rest Parameters)

가변 개수의 인자를 배열로 받을 수 있는 기능이다. 

function functionName(...restParams: Type[]): ReturnType {
  // 함수 구현
}

이러한 구조로 작성한다. 고정된 배열을 사용해야한다면, 튜플을 사용하면 된다.

function sum(...numbers: number[]): number {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3)); // Output: 6
console.log(sum(4, 5, 6, 7, 8)); // Output: 30

 

 

3.함수 오버로딩(Function Overloading)

오버로딩이란 동일한 이름의 함수에 대해 매개변수의 개수나 타입에 따라 다른 동작을 하는 기능이다.

함수 오버로딩을 구현하기 위한 단계는 다음과 같다.

오버로딩 시그니처 정의 ➡️ 구현 시그니처 작성 

 

1️⃣오버로딩 시그니처 정의

function func(a: number): void;
function func(a: number, b: number, c: number): void;

 

 

이렇게 매개변수의 개수가 다른 오버로딩 시그니처를 작성 할 수 있다.

시그니처에는 매개변수 타입과 개수가 들어간다. 여러개의 시그니처를 작성할 수 있다.

 

2️⃣구현 시그니처 작성하기

function func(a: number, b?: number, c?: number) {
  if (typeof b === "number" && typeof c === "number") {
    console.log(a + b + c);
  } else {
    console.log(a * 20);
  }
}

구현 시그니처에서는 오버로딩 시그니처와 일치하는 매개변수 타입과 반환 타입을 가져야 한다. 

매개변수의 개수가 다를때는 선택적 매개변수를 통해서 작성해주지 않으면 에러가 발생할 수 있다. 

이렇게 작성하고 함수를 호출하게 되면 매개변수에 맞는 시그니처에 따라 동작하게 된다. 

함수 오버로딩은 다형성(Polymorphism)을 구현하는데 유용하며, 코드의 가독성과 유지보수성을 높인다.

 

 

자료

https://www.typescriptlang.org/ko/docs/handbook/2/functions.html#%ED%98%B8%EC%B6%9C-%EC%8B%9C%EA%B7%B8%EB%8B%88%EC%B2%98

https://ts.winterlood.com/