📌 면접을 준비하느라 블로그를 조금 늦게 작성했다. 😹
해당 글은 인터페이스의 두번째 내용이다.! 인터페이스를 확장하는 방법, 그리고 인터페이스에 교차 타입을 활용하는 내용에 대해서 정리해보았다.
인터페이스의 확장 (extends)
확장(extends)이란?
타입스크립트에서 확장 유형이란, 인터페이스를 다른 인터페이스에 상속하는 개념이다. 이를 통해 유연하게 기존에 있던 타입을 재사용하고, 새로운 타입을 추가해줄 수 있다.
간단한 예제를 작성해보았다.
interface Aespa {
groupName?: string;
titleMusic: string;
memberNum: number;
}
interface AespaWithFan extends Aespa {
fan: string;
}
const aespa: AespaWithFan = {
titleMusic: 'spicy',
memberNum: 4,
fan: 'MY',
};확장은 extends 키워드를 통해 이루어진다.
위와 같이 Aespa에 지정된 타입들을 extends를 활용하여 AespaWithFan이라는 인터페이스에 타입 멤버들을 상속시켜주었다.
확장을 사용하면 타입을 더 유연하고 구체적으로 만들어줄 수 있고, 이를 통해 재사용성 / 유지 보수 측면에서도 이점을 챙길 수 있다.
인터페이스를 사용할 때 꼭 알아야할 강력한 기능이다. 이전에 프로젝트를 하며 사용해보았는데, 기존 타입을 유지하되 다른 타입을 추가하여 타입 지정을 할 때 굉장히 유용했다.
교차 유형 (intersection type)
교차 유형(intersection type)이란?
교차 타입은 두 개 이상의 타입을 조합해, 새로운 타입을 생성하는 방법이다. 개인적으로 Union type과 문법과 비슷하게 느껴졌다.
(하지만, Union type은 합집합이다. 서로 다른 개념이니 주의.!)
영어 문서를 보다보니 사실 한국어로 뭐라 하는지 모르겠다. 번역해보니 교차 유형(?)..이다.
interface Aespa {
groupName?: string;
titleMusic: string;
memberNum: number;
}
interface Fan {
fan: string;
}
type AespaWithFan = Aespa & Fan;
위 예제처럼 Aespa 타입과 Fan 타입을 교차하여 새로운 타입을 만들어보았다. 교차 타입은 타입을 조합하여, 여러 타입을 가진 새로운 타입을 생성할 수 있다.
비슷한 개념 같은데..?
맞다. 공식 문서에도 언급하듯, 유사하지만 실제로 미묘하게 다른 유형이다.
두 개념이 각각 사용되는 상황
인터페이스
- 객체의 타입 구조를 명시적으로 나타내며, 타입 체크를 하고 싶을 때.
- 인터페이스를 확장하여 유연하게 타입을 검사하고, 코드의 재사용성 면에서 이점을 얻고 싶을 때.
교차 타입
- 여러 개의 타입을 조합해 새로운 타입을 만들어 타입을 지정해주고 싶을 때.
(두 개 이상의 타입을 모두 가지는 경우 유용할 것 같다.)
마치며
이렇게 타입스크립트에서 인터페이스의 확장과, 교차 유형에 대해서 알아보았다.
intersection type을 처음 제대로 알아보았는데, 실제로 사용해볼 기회가 있었으면 좋겠다. 타입스크립트는 직관적이고 강력한 정적 타이핑 기능들을 많이 제공해주는 것 같다.
다음 글에서는 제네릭에 대해 알아보자 👍
참고 문서
