154. [TypeScript] 함수타입 TIL 23.05.15

---

 

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) //오류 string을 number 형식에 할당할 수 없기 때문
const c = add(1, 2, 3) //오류 2개의 인수가 필요한데 3개를 가져옴
const d = add(10) //오류 2개의 인수가 필요한데 1개를 가져옴

 

 

반환 값이 없는 함수

function printResult(num: number): void {
	console.log('결과' + num) //결과2
}

printResult(2)

//화살표함수
const printResult = (num: number): void => {
  console.log('결과' + num)
}

printResult(2)

 

 

선택적 매개변수(optional parameter)

TS에서 함수 정의 시 매개변수를 선택적으로 사용할 수 있게 하는 기능.
함수의 매개변수 뒤에 물음표 '?'를 붙여서 표시함

function intro(name: string, age?: number) {
	console.log(`안녕하세요, ${name}입니다!`)
    if(age) {
    	console.log(`나이는 ${age}살입니다!`)
    }
}

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

//오류 : 선택적 매개변수(n1?: number)가 필수 매개변수 (n2: number)보다 앞에 위치해 있기 때문.
//TS에서는 선택적 매개변수는 필수매개변수 뒤에 위치해야함.

//올바른 코드
function add2(n1: number, n2?: number): number {
  if (!n2) return n1;
  return n1 + n2;
}

 

 

기본값 매개변수(Default Parameter)

함수의 매개변수에 기본 값을 설정하는 것

function greet(name: string = "Guest"): void {
  console.log(`Hello, ${name}!`);
}

greet(); // Hello, Guest!
greet("John"); // Hello, John!

 

 

나머지 매개변수(Rest Parameter)

가변 개수의 인자를 받을 수 있는 기능.
매개변수 이름 앞에 '...'을 붙여서 표현하며, 이는 해당 매개변수가 여러 개의 인자를 배열로 받을 수 있음을 나타냄

function add(...numbers: number[]): number {
	let total = 0;
    for(const num of numbers) {
    	total += num;
    }
	return total;
}

console.log(add(1, 2, 3)) //6
console.log(add(10, 20, 30, 40, 50, 60)) //210