5.30 TypeScript의 함수

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

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;
}

TypeScript에서 함수를 표현할 때는 매개변수의 타입과 반환 타입을 명시해야 합니다. 각 매개변수에 해당하는 타입을 작성한 뒤, 반환되는 타입을 괄호 뒤에 작성을 해줘야 합니다. 이는 타입 추론 기능을 활용하지 않는다고 가정했을 때 필수입니다.

만일 함수에 리턴값이 없다면, void를 사용하여 작성할 수 있습니다. 이 또한 타입 추론 기능을 활용하지 않는다고 가정했을 때 필수입니다.

let printAnswer = (): void => {
	console.log("YES");
}

또한 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: string ="kim"): string => {
	return `hello, ${firstName} ${lastName}`;
}

//정상적으로 작동합니다. 
greeting('coding');

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

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

이때는 뒤의 인자로 undefined를 보내도 값은 “hello, coding kim”으로 반환됩니다.

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

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

//정상적으로 작동합니다.
greeting('coding');

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

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

그러나 이때는 greating('coding')과 같이 전달인자를 하나만 전달했기 때문에, 뒤의 매개변수는 undefined로 반환이 됩니다.