0059. TypeScript 공부하기8 - 함수 오버로딩, 사용자 정의 타입 가드(Custom Type Guard)

섹션 4. 함수와 타입

4강. 함수 오버로딩

함수를 매개변수의 개수나 타입에 따라서 여러 가지 버전으로 정의하는 방법을 말한다.

출처 : 한입크기로 잘라먹는 타입스크립트(인프런)

 

자바스크립트에서는 지원이 안되고, 타입스크립트에서 지원이 된다.

 

함수의 여러 버전들을 만들어준다.

이 버전들을 오버로드 시그니처라고 하는데, 함수의 구현부 없이 선언식만 써 놓은 것이다.

- 오버로딩을 위해 매개변수별로 각각 함수의 버전을 써 놓은 것으로 이해하면 된다.

function func(a: number): void;
function func(a: number, b: number, c: number): void;

 

어떤 함수가 오버로드 시그니처를 갖고 있으면 이 함수를 호출할 때, 인수들의 타입이 구현부에 정의된 매개변수의 개수나 타입을 따르지 않고 오버로드 시그니처들의 버전 중 하나를 따라간다.

 

실제 구현부에는 구현 시그니처만 들어간다.

function func() {}

 

여기서 함수 오버로드와 일치하지 않는 func();, func(1, 2);는 모두 에러가 난다.

 

실제 구현부에서 모든 인수들의 타입을 정의하면 함수 오버로드가 오히려 쓸모없게 된다.

따라서, 이를 해결하기 위해 선택적 인수 정의가 필요하다.

 

//버전들
function func(a: number): void;
function func(a: number, b: number, c: number): void;

//실제 구현부 -> 구현 시그니처
function func(a: number, b?: number, c?: number) {
    if (typeof b === "number" && typeof c === "number") { //b나 c가 없을 수도 있으므로
        console.log(a + b + c);
    } else {
        console.log(a * 20);
    }
}

 

 

5강. 사용자 정의 타입 가드(Custom Type Guard)

type Dog = {
    name: string;
    isBark: boolean;
};

type Cat = {
    name: string;
    isScratch: boolean;
};

type Animal = Dog | Cat;

function warning(animal: Animal) {
    if("isBark" in animal) {
        // 강아지
    } else if ("isScratch" in animal) {
        // 고양이
    }
}

이렇게만 코딩하면 뭔가 부족하다.

isBark가 isBarked 등으로 타입이 바뀐다면 밑에 함수들이 작동을 안 할 것이기 때문이다.

그래서 사용자 정의 함수가 필요하다.

 

type Dog = {
    name: string;
    isBark: boolean;
};

type Cat = {
    name: string;
    isScratch: boolean;
};

type Animal = Dog | Cat;

function isDog(animal: Animal): animal is Dog { // True를 리턴한다면 animal is Dog를 리턴하게 만듦
    return (animal as Dog).isBark !== undefined // animal 타입을 Dog로 좁혀줌
}

function isCat(animal: Animal): animal is Cat {
    return (animal as Cat).isScratch !== undefined
}

function warning(animal: Animal) {
    if("isBark" in animal) {
        // function이 true면 Dog 타입이라고 알아듣게 만드는 것
        animal;
    } else if ("isScratch" in animal) {
        // 고양이
        animal;
    }
}

이렇게 써주면 타입을 좁혔기 때문에 if, else if에 따라서 Dog와 Cat 타입을 인식하게 된다.