TS 정리 (한 입 크기로 잘라먹는 타입스크립트(TypeScript)) - 05

해당 포스팅은 한 입 크기로 잘라먹는 타입스크립트(TypeScript)를 학습하면서 알게된 정보들을 정리하였습니다.

https://inf.run/EvrS5

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런

 

인터페이스

ts에서의 인터페이스 또한 타입처럼 다음과 같이 선언이 가능합니다.

interface Person {
    readonly name: string,
    age: number
};

const person: Person = {
    name: "홍길동",
    age: 30,
};

또한, 인터페이스에 함수를 구현해서 사용하는 것도 가능합니다.

interface Person {
    readonly name: string,
    age?: number
    sayHi: () => void;
};

const person: Person = {
    name: "홍길동",
    sayHi: function () {
        console.log("hi");
    }
};

만약, 이전시간에 배운 함수 오버로딩을 사용하기 위해서, sayHi에 매개 변수가 있는 함수와 매개 변수가 없는 함수를 모두 사용해야 하는 경우에는 어떻게 해야할까요?

interface Person {
    readonly name: string,
    age?: number
    sayHi: () => void;
    sayHi: (a: number, b: number) => void; // error
};

const person: Person = {
    name: "홍길동",
    sayHi: function () {
        console.log("hi");
    }
};

person.sayHi();
person.sayHi(1, 2);

이렇게 사용하는 경우 sayHi라는 함수가 2개라 error가 발생합니다.

 

그럼 어떻게 해야할까요?

 

이 경우, 호출 시그니처를 활용하여 사용이 가능합니다.

interface Person {
    readonly name: string,
    age?: number
    //sayHi: () => void;
    sayHi(): void;
    //sayHi: (a: number, b: number) => void; 
    sayHi(a: number, b: number): void
};

인터페이스의 확장

일반적으로 다른 언어들에서는 존재하는 extends나 implements를 활용하여 interface를 상속합니다.

 

ts에서는 extends를 활용하여 다른 interface를 상속하여 불편함을 덜어줄 수 있습니다.

interface Animal {
    name: string,
    color: string
}

interface Dog {
    name: string,
    color: string
    isBark: boolean
}

다음과 같이 선언되어져 있는 경우, Dog 인터페이스에는 Animal 인터페이스에 있는 name, color가 모두 존재하는 상태입니다.

 

이런 경우 extends를 활용하여 다음과 같이 정리할 수 있습니다.

interface Animal {
    name: string,
    color: string
}

interface Dog extends Animal {
    isBark: boolean
}

물론, Animal 인터페이스에서 받아온 name이라는 값을 수정해줄 수 있습니다.

interface Animal {
    name: string,
    color: string
}

interface Dog extends Animal {
    name: "멍멍이",
    isBark: boolean
}

그러나, 상속받은 Animal타입의 name의 타입이 문자열 형식이라, 문자열이나 서브 타입인 문자열 리터럴 타입만 가능합니다.

 

만약, 다른 타입으로 수정하는 경우, Dog 인터페이스는 Animal 인터페이스를 상속하는 것이 아닌, 전혀 다른 인터페이스를 만드는 것이 되므로, Animal 인터페이스를 상속하지 못하게 됩니다.

 

추가로, 인터페이스는 다른 인터페이스뿐만 아니라 타입 별칭인 경우에도 상속이 가능합니다.

type Animal = {
    name: string,
    color: string
}

interface Dog extends Animal {
    isBark: boolean
}

물론, 인터페이스는 하나 뿐만 아니라 여러개의 인터페이스를 상속할 수 있습니다.

type Animal = {
    name: string,
    color: string
}

interface Dog extends Animal {
    isBark: boolean
}

interface Cat extends Animal {
    isScratch: boolean
}

interface DogCat extends Dog, Cat {

}

여기서 만약, Dog에 name을 문자열 리터럴 타입으로 바꾸게 된다면 어떻게 될까요?

type Animal = {
    name: string,
    color: string
}

interface Dog extends Animal {
    name: "멍멍이",
    isBark: boolean
}

interface Cat extends Animal {
    isScratch: boolean
}

interface DogCat extends Dog, Cat { // error

}

그런 경우, Dog와 Cat을 상속받고 있는 DogCat에서 Dog와 Cat을 동시에 상속받을 수 없습니다 라는 형식으로 에러가 발생하게 됩니다.

선언 합침

인터페이스의 경우, 다음과 같이 같은 명칭으로 여러 개를 동시에 선언이 가능합니다.

interface Person {
    name: string
}

interface Person {
    age: number
}

이렇게 만들어진 Person 인터페이스의 경우, 다음과 동일하게 작동합니다.

interface Person {
    name: string
    age: number
}

만약 여기서, 나중에 만들어진 타입에서 name의 타입을 변경하게 된다면 어떻게 될까요?

interface Person {
    name: string
}

interface Person {
    name: "hello", //error
    age: number
}

이전에 인터페이스를 상속하는 경우에는 서브 타입인 경우에도 허용이 되었지만, 동일한 명칭으로 인터페이스를 선언하는 경우, 나중에 선언되는 부분에서 문제가 발생합니다.

 

다음과 같이 age를 선언하고, 같은 명칭의 다른 인터페이스에서 사용할 경우에도 마찬가지로 에러가 발생합니다.

interface Person {
    name: string,
    age: string
}

interface Person {
    age: number // error
}

해당 방식은 주로, 특정 라이브러리에 선언되어져 있는 인터페이스의 특정 값을 추가하기 위하여 사용됩니다.