(SEB_FE) Section4 Unit5 TypeScript의 함수

JavaScript에서 함수는 모든 애플리케이션의 기본적인 구성 요소! TypeScript에도 함수는 JavaScript와 마찬가지로 기명 함수(named function)와 화살표 함수(arrow function) 등으로 만들 수 있다.

아래의 JavaScript 코드를 TypeScript로 포팅해보자.

JavaScript에서의 함수 작성

//named function
function add(x, y){
	return x + y;
}

//arrow function
let add = (x, y) => {
	return x + y;
}

TypeScript에서의 함수 작성

//named function
function add(x: number, y: number): number {
	return x + y;
}

//arrow function
let add = (x: number, y: number): number => {
	return x + y;
}

// return 값이 없다면, void 사용 
let printAnswer = (): void => {
	console.log("YES");
}

보다시피,
TypeScript에서 함수를 표현할 때는 매개변수의 타입과 반환 타입을 명시해야 한다. 만일 함수에 리턴값이 없다면, void를 사용하여 작성할 수 있다.
이는 타입 추론 기능을 활용하지 않는다고 가정했을 때 필수!

또한 TypeScript는 JavaScript와 달리 매개변수의 개수에 맞춰 전달인자를 전달해야 한다.

let greeting = (firstName: string, lastName: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

//에러
greeting('coding');

//정상적으로 작동
greeting('coding', 'kim');

//너무 많은 매개변수를 보내 에러
greeting('coding', 'kim', 'hacker');

만약 개발자가 전달인자를 전달하지 않거나, undefined를 전달했을 때 할당될 매개변수의 값을 정해놓을 수도 있다.
이는 JavaScript에서의 default parameter와 같은 동작을 한다.

let greeting = (firstName: string, lastName="kim"): string => {
	return `hello, ${firstName} ${lastName}`;
}

//정상적으로 작동
//출력 결과: hello, coding kim
greeting('coding');

//정상적으로 작동
greeting('coding', undefined);

//너무 많은 매개변수를 보내 에러
greeting('coding', 'kim', 'hacker');

혹은 선택적 매개변수를 원한다면 매개변수의 이름 끝에 ?를 붙임으로써 해결할 수도 있다.

let greeting = (firstName: string, lastName?: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

//정상적으로 작동
//출력 결과: hello, coding undefined 
greeting('coding');

//정상적으로 작동
greeting('coding', 'kim');

//너무 많은 매개변수를 보내 에러
greeting('coding', 'kim', 'hacker');