TS - 함수

타입스크립트에세 자주 사용되는 함수는 크게 다음 3가지 타입을 정의할 수 있습니다.

 

• 함수의 파라미터(매개변수) 타입
• 함수의 반환 타입
• 함수의 구조 타입

1. 함수의 기본적인 타입 선언

   1-1. JS의 기본 함수 선언 방식

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

 1-2. TS의 기본 함수 선언 방식

- 함수 선언식

// TS 함수 선언 - 함수의 매개 변수
function add(a: number, b: number) {
   return a + b;
}
let result = add(10,20);

// 파라미터 a, b는 number 타입, 함수 리턴 타입은 정의되지 않음.
// 이런 경우 result는 자동으로 number 로 타입을 추론함. (num + num 이므로)

------------------------------------------------------------------------------------

// TS 함수 선언 - 함수의 반환 타입 추가
function add(a: number, b: number): number {
   return a + b;
}
let result = add(10, 20);

// 파라미터 a, b는 number 타입, 함수 리턴 타입 또한 number 타입
// 함수 리턴 타입을 number 가 아닌 string, boolean 으로 하면 오류 발생. (num + num 은 number 타입이므로)

- 함수 표현식

/* TS - 함수 표현식 */

// 이름 있는 함수 표현식
const add = function add(a: number, b: number): number {
  return a + b;
};

// 이름 없는 함수 표현식
const add = function (a: number, b: number): number {
  return a + b;
};

// 화살표 함수
const add = (a: number, b: number): number => {
  return a + b;
};

// 리턴 생략한 화살표 함수
const add = (a: number, b: number): number => a + b;

 

2. 함수의 인자

   2-1. 기본값, 선택적 파라미터

// 함수 기본값 파라미터(default parameter)
function printText(text: string, type: string) {
  console.log(text);
}
printText('hi'); // Error (str 타입의 파라미터 2개를 넘겨야하는데 하나만 넘겼으므로)
printText('hi','type');

--------------------------------------------------------------------------------

// 함수 옵셔널 파라미터(optional parameter)
function printText(text: string, type?: string) {
  console.log(text);
}
printText('hi');
printText('hi','type');

// ? 를 통해 타입을 정의하면 해당 파라미터 값은 넘기지 않아도 됨.

   2-2. Rest 문법을 통한 나머지 매개변수

// REST 문법이 적용된 나머지 매개변수
function sum(a: number, ...nums: number[]): number {
  let totalOfNums = nums.reduce((acc, cur) => acc += cur, a);
  return a + totalOfNums;
}

sum(0, 1, 2, 3); // nums = [1, 2, 3]
sum(0, 1, 2, 3, 4, 5); // nums = [1, 2, 3, 4, 5]

나머지 매개변수를 통해 타입 정의 시 주의해야 할  사항이 있습니다.

 

• 나머지 매개변수는 항상 마지막에 있어야 합니다.
• 나머지 매개변수는 함수 정의 방법과 상관없이 함수에 넘겨주는 인수의 개수에 제약이 없습니다.
• 나머지 매개변수는 함수 호출에서 파라미터의 "나머지"를 배열로 모아주는 기능입니다.

 

 

기초적인 함수 사용법에 대해서만 정리해봤다. 공부할 때마다 함수에 관한 새로운 내용을 배우면 추가적으로 정리해야겠다!
(현재 210506 기준 정리)

 

 

* 참고

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의