ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [TypeScript] 함수의 타입 정의
    👩🏻‍💻 정리/TypeScript 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)