[TypeScript] 함수

🌈 코딩앙마의 TypeScript 강좌 수강 후, 이해한 내용을 정리한 글입니다.

기본 형식

파라미터와 리턴값의 타입을 지정해 준다.

function add(num1: number, num2: number): void {
	console.log(num1 + num2);
}

파라미터를 optional로 지정할 수 있다.

1.형식
?를 사용한다.

function hellow(name?: string) {
	return `Hello, ${name || "world"}`;
}

const result = hello();

위의 코드는 아래 코드와 같이 파라미터에 기본값을 설정한 것과 같다.

function hello(name = "world") {
	return `Hello, ${name}`;
}

const result = hello();

2.순서
optional인 파라미터는 맨 뒤에 작성한다.

function hello(name: string, age?: number): string {
	if(age !== undefined) {
    	return `Hello, ${name}. You are ${age}.`;   
    } else {
    	return `Hello, ${name}`;
    }
}

console.log(hello("Sam"));

만약 앞에 작성하고 싶다면 아래 코드처럼 undefined로 채워준다.

function hello(age: number | undefined, name: string): string {
	if(age !== undefined) {
    	return `Hello, ${name}. You are ${age}.`;   
    } else {
    	return `Hello, ${name}`;
    }
}

console.log(hello(undefined, "Sam"));

rest parameter인 경우

파라미터 타입을 배열로 지정한다.

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

함수 본문에 this가 있는 경우

파라미터 이전에 this의 타입을 작성한다.

interface User {
	name: string;
}

const Sam: User = {name:'Sam'}

function showName(this:User, age:number, gender:'m'|'f') {
	console.log(this.name, age, gender)
}

const a = showName.bind(Sam);
a();

파라미터의 타입에 따라 리턴값의 타입이 다른 경우

Function Overloads를 사용한다. overload signature를 작성 후 함수 본문을 작성해 준다.

일부 JavaScript 함수는 다양한 인수 수와 유형으로 호출할 수 있습니다. ...생략... 타입스크립트에서는 overload signature를 작성하여 다양한 방식으로 호출할 수 있는 함수를 지정할 수 있습니다. 이렇게 하려면 몇 개의 overload signature(보통 2개 이상)를 작성한 다음 함수 본문을 작성하면 됩니다.
🔗https://www.typescriptlang.org/docs/handbook/2/functions.html#function-overloads

아래의 코드는 age의 타입에 따라 리턴값의 타입이 다른 경우이다.

interface User {
	name: string;
  	age: number;
}

// overload signature
function join(name: string, age: string): string;
function join(name: string, age: number): User;
// 함수 본문
function join(name: string, age: number | string): User | string {
	if(typeof age === "number") {
    	return {name, age};
    } else {
    	return "나이는 숫자로 입력해 주세요.";
    }
}

const sam: User = join("Sam", 30);
const jane: string = join("Jane", "30");