[TypeScript] 타입스크립트의 함수 타입 - 파라미터, 반환값, 인자, 옵셔널 파라미터

   

   목차 

1. 함수의 "파라미터"에 타입을 정의하는 방식
2. 함수의 "반환값"에 타입을 정의하는 방식
3. 함수의 타입을 정의하는 방식 
4. 함수의 인자
5. 함수의 옵셔널 파라미터

 

 

타입스크립트 함수 타입에 대해서 알아보자!

 

 

---

 

 

 1. 함수의 "파라미터"에 타입을 정의하는 방식 

파라미터의 개수와 인자도 개수를 맞춰줘야 한다. (1:1 mapping이 돼야한다.) 

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

sum (10, 20);

 

 

 

 2. 함수의 "반환 값"에 타입을 정의하는 방식 

 

function add(): number{
  return 10;
}

함수의 반환 값에 타입을 정하지 않을 때는 void라도 사용하기!

 

 

 

 3. 함수의 타입을 정의하는 방식 (가장 기본적인 모습) 

 

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

 

* 참고) 타입 부여 하기 전 자바스크립트 함수

function sum(a, b) {
  return a + b;
}

 

 

 

 4. 함수의 인자 

 

- 타입스크립트에서는 함수의 인자를 모두 필수 값으로 간주한다.
- 따라서, 함수의 매개변수를 설정하면 undefined나 null이라도 인자로 넘겨야하며,
- 컴파일러에서 정의된 매개변수 값이 넘어 왔는지 확인한다.
- 즉,  정의된 매개변수 값만 받을 수 있고 추가로 인자를 받을 수 없다.
- 이러한 특성은 정의된 매개변수의 갯수 만큼 인자를 넘기지 않아도 되는 자바스크립트의 특성과 반대된다.

 

function sum(a: number, b: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // error, too few parameters

 

 

 

 5. 함수의 옵셔널 파라미터 

 

- 추가적으로 들어올 수 있는 파라미터의 개수를 선택적으로 쓰고 싶을 때
- 정의된 매개변수의 갯수 만큼 인자를 넘기지 않아도 되고 싶을 때

function sum(a: number, b?: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // 타입 에러 없음

 

매개변수 초기화는 ES6 문법과 동일하다.

function sum(a: number, b = '100'): number {
  return a + b;
}
sum(10, undefined); // 110
sum(10, 20, 30); // error, too many parameters
sum(10); // 110