TypeScript

TypeScript 3일차 (함수 형성하기)

수연 (Suyeon) 2023. 8. 29. 14:47
반응형

📌 TypeScript로 기본 함수 형성하기

function add(num1:number, num2:number): void { // 반환값 타입: 없음
  console.log(num1 + num2);
}


function isAdult(age: number):boolean { // 반환값 타입: boolean
  return age > 19;
}
함수를 형성할 때 매개변수의 타입반환값의 타입을 지정해야 합니다.

 

 

📌 선택적 매개변수

function hello(name?: string) {
  return `Hello, ${name || "world"}`; // name이 없을 땐 world를.
}

const hel = hello();		// 가능
const hel2 = hello('Sara');	// 가능
?:의 의미는 해당 매개변수가 있어도 되고 또는 없어도 된다는 의미를 나타냅니다.

API의 타입을 정의할 때 사용하지 않는 값에 ?:를 활용하기도 합니다.

 

 

📌 선택적 매개변수와 필수 매개변수 위치에 따른 문제

function hello3(name: string, age?: number): string {
  if(age !== undefined) {
    return `${name}'s age -> ${age}`;
  } else {
    return `${name}'s age -> ??`;
  }
} // 가능


function hello3(age?: number, name: string): string {
  if(age !== undefined) {
    return `${name}'s age -> ${age}`;
  } else {
    return `${name}'s age -> ??`;
  }
} // 불가능
함수를 호출할 때 매개변수 타입에 맞게 사용해야 하는데
선택적 매개변수(?:)는 있어도 되고 없어도 되기 때문에 마지막에 위치하지 않으면 오류가 발생합니다.

 

 

📌 매개변수 값 초기화

function hello2(name = 'world') {
  return `Hello, ${name}`;
}

const hel = hello();		// 가능
const hel2 = hello('Sara');	// 가능
초기화된 매개변수를 활용하면 선택적 매개변수와 동일하게 활용할 수 있습니다.

 

 

📌 매개변수 개수가 유동적일 때

function sum(...nums: number[]) {
  return nums.reduce((result, num) => result + num, 0);
}

sum(1, 2, 3);						// 6
sum(10, 11, 12, 13, 14, 15, 20);	// 95
...은 JS에서 배열이 아닌 값들을 []를 제거한 배열로 변환해주는 Spread Operator(펼침 연산자)입니다.
따라서 해당 매개변수의 타입은 배열로 지정해줘야 합니다.
728x90