👩🏻‍💻 정리/TypeScript

[TypeScript] 함수의 타입 정의

Bohyun 2021. 9. 15. 23:33

목차

1. 함수 정의
    1.1 함수 선언식
    1.2 화살표 함수
2. 다양한 매개변수 타입


1. 함수 정의

타입스크립트에서는 함수의 타입을 정의해줘야 한다.

1.1 함수 선언식

함수 선언식의 타입 정의는 아래와 같다.

function formatDate(d: Date): string { 1️⃣, 2️⃣
	let year = d.getFullYear();
	let month = d.getMonth() + 1;
	let day = d.getDate();

	return `${year}년 ${month}월 ${day}일`
}

const today = formatDate(new Date());

1️⃣ 매개변수의 우측에 콜론과 매개변수의 타입을 정의한다. → formatDate(d: Date)
2️⃣ return 값의 타입은 소괄호 우측에 타입을 정의한다. → formatDate(): string {}

⇒ 즉, formatDate의 매개변수 d는 Date 객체 타입을 받아야 하고, return 값은 문자열이어야 한다.

1.2 화살표 함수

화살표 함수도 동일하다.

const formatDate = (d: Date): string => {
	const year = d.getFullYear();
	const month = d.getMonth() + 1;
	const day = d.getDate();

	return `${year}년 ${month}월 ${day}일`;
};

const today = formatDate(new Date());

2. 다양한 매개변수 타입

아래와 같이 매개변수의 타입을 여러 개로 복잡하게 받을 수도 있다.

let formatDate = (d: Date | number, lang = "ko", delimiter?: string): string => { 1️⃣, 2️⃣, 3️⃣
	// 로직 생략
};

formatDate(new Date());
formatDate(20201028, "en");
formatDate(20201028, "en", "-");

1️⃣ 첫 번째 매개변수 d는 Date 객체 타입 혹은 number로 타입을 정의한다. → (d: Date | number)
2️⃣ 두 번째 매개변수 lang은 전달되는 인자가 없을 시, "ko"라는 문자열의 값이 기본적으로 할당된다. → (lang = "ko")
3️⃣ 세 번째 매개변수 delimiter는 물음표를 사용하여 선택적으로 인자를 전달한다. → (delimiter?: string)