4. 함수타입

JS → TS 함수 변환

JS로 작성된 함수

function add(n1, n2) {
	return n1 + n2;
}

TS로 변환

function add(n1: number, n2: number): number {
	return n1 + n2;
}

// const add = (n1: number, n2: number) => {
//   return n1 + n2;
// };

const a = add(1, 2);
const b = add('1', 2); // Error
const c = add(10, 20, 30); // Error
const d = add(10); // Error

function add(n1: number, n2: number) {
  return n1 + n2 + 'abc';
}

• 다음과 같이 숫자+문자열은 string값이므로 "add(n1: number, n2: number): number"로 작성하는 것이 올바르다.

---

반환 값이 없는 함수

function printResult(num: number): void {
	console.log('Result' + num);
}

printResult(5);

---

Optional Parameter

함수에 파라미터자리를 만들어놨지만 가끔 파라미터 없이 쓸 때도 있습니다.

그럴 경우 타입스크립트에선 미리 "이 파라미터는 옵션임" 이렇게 정의를 해주셔야 에러가 나지 않습니다.

// JS
function add2(n1, n2) {
  if (!n2) return n1;
  return n1 + n2;
}

// TS
function add2(n1: number, n2?: number): number {
  if (!n2) return n1;
  return n1 + n2;
}

const a2 = add2(1, 2);
const b2 = add2(10, 20, 30); // Error
const c2 = add2(10);

function add2(n1?: number, n2: number): number { // 불가
  if (!n2) return n1;
  return n1 + n2;
}

function add2(n1: number, n2?: number, n3?: number): number {
  if (!n2) return n1;
  return n1 + n2;
}

파라미터 우측에 그냥 물음표치면 됩니다. 그럼 앞으로 내함수()를 사용할 때 파라미터없이도 쓸 수 있습니다.

근데 물음표는 실은 x : number | undefined 이거랑 똑같은 의미입니다 (중요)

파라미터가 정의가 안되면 자동으로 undefined가 되니까 그걸 반영한거라고 볼 수도 있겠습니다. 

• 옵셔널 파라미터를 필수 파라미터앞에 놓으면 이러한 에러가 발생한다.

---

Default Parameter

function add3(n1: number, n2: number = 0): number {
  if (!n2) return n1;
  return n1 + n2;
}

const a3 = add3(1, 2);
const c3 = add3(10);

---

Rest Parameter

function add4(n1: number, ...nums: number[]): number {
  let totalOfNums = 0;
  for (let key in nums) {
    totalOfNums += nums[key];
  }
  return n1 + totalOfNums;
}

const result = add4(10, 20, 30, 40);