[TypeScript] 함수

interface에 관한 글을 쓰면서 함수에 대한 코드를 잠깐 언급했었는데 이번 글에서도 다뤄보고자 한다. 이미 우리가 알고 있는 함수 그대로이다. Typescript에서는 함수에도 타입을 선언할 수 있다. 리턴값이 없다면 타입은 void가 된다.

function test(name: string, age: number): string {
    if (age === undefined)
        return `name : ${name}`;
    else
        return `name: ${name}, age: ${age}`;
}

console.log(test('jun')); //error
console.log(test('jun', 25)); // name: jun, age: 25

위의 함수는 name과 age 두 개의 변수를 받고 리턴값이 string인 함수이다. 따라서 첫 번째 로그와 같이 age를 입력하지 않으면 에러가 발생한다. 이를 해결하려면 age?: number와 같이 optional parameter를 사용하면 된다.

---

나머지 매개변수

나머지 매개변수는 입력받은 매개변수를 배열의 형태로 저장하는 방식이다.

const add = (...nums: number[]): void[] => {
    return nums.map(data => console.log(`I'm ${data}`))
}

add(1, 2, 3);
add(10, 11, 12, 13, 14);

위의 코드 실행 결과

위의 코드처럼 add 함수에 number 타입의 매개변수가 몇 개가 들어가든 결과가 잘 출력된다.

---

함수 오버로딩

함수 오버로딩이란 함수의 이름만 같고 기능은 다른 함수 정의하는 것을 말한다. 오버로딩이 필요한 경우를 아래의 예시를 통해 살펴보자.

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

const info = (name: string, age: number | string): User | string => {
    if (typeof age === "number")
        return {
            name, age
        }
    else
        return '나이는 숫자로 입력하세요'
}

const jun: User = info("jun", 25); //error
const micky: string = info("micky", "20"); //error

age의 타입에 따라 함수의 타입도 변하는 코드이다. 맨 아래와 같이 함수를 불러오면 에러가 발생한다. 이를 해결하려면 아래와 같이 함수 오버로딩을 해야 한다. 다만 하나의 함수에 대해 여러 개의 선언문을 작성하는 경우에만 가능하다. 즉, 구현체는 하나여야 한다.

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

function info(name: string, age: number): User //함수 오버로딩
function info(name: string, age: string): string //함수 오버로딩
function info(name: string, age: number | string): User | string {
    if (typeof age === "number")
        return {
            name, age
        }
    else
        return '나이는 숫자로 입력하세요'
}

const jun: User = info("jun", 25);
const micky: string = info("micky", "20");