반응형
인터페이스
클래스는 인터페이스를 통해 사용할 때가 많습니다.
타입 별칭처럼 인터페이스도 타입에 이름을 지어주는 수단이므로 인터페이스를 사용하면 타입을 더 깔끔하게 정의할 수 있습니다.
타입 별칭과 인터페이스는 문법만 다를 뿐 거의 같은 기능을 수행하며, 작은 몇몇 부분에서만 차이를 보입니다.
먼저 둘의 공통점을 살펴보겠습니다.
아래 코드는 타입 별칭입니다.
type RiceCake = {
calories: number
salty: boolean
tasty: boolean
}
이 코드를 다음처럼 간단하게 인터페이스로 바꿀 수 있습니다.
interface RiceCake {
calories: number
salty: boolean
tasty: boolean
}
RiceCake 타입 별칭을 사용한 모든 곳에 RiceCake 인터페이스를 대신 사용할 수 있습니다.
둘 다 형태(shape)를 정의하며 두 형태 정의는 서로 할당할 수 있습니다.(실제로 둘은 같은 존재입니다.)
타입을 조합하기 시작하면 더 흥미로운 일이 벌어집니다. RiceCake 외에 다른 음식도 만들어보겠습니다.
type KimBob = {
calories: number
carrot: boolean
tasty: boolean
}
RiceCake와 KimBob뿐 아니라 많은 음식이 calories(칼로리)와 tasty(맛) 프로퍼티를 포함합니다.
그러니 Food라는 타입을 따로 빼서 공통 정보를 정의하고 다른 음식들도 Food를 이용해 다시 정의할 수 있습니다.
type Food = {
calories: number
tasty: boolean
}
type RiceCake = Food & {
salty: boolean
}
type KimBob = Food & {
carrot: boolean
}
위의 코드를 인터페이스로 정의할 수도 있습니다.
interface Food {
calories: number
tasty: boolean
}
interface RiceCake extends Food {
salty: boolean
}
interface KimBob extends Food {
carrot: boolean
}
※ 인터페이스가 반드시 다른 인터페이스를 상속받아야 하는 것은 아닙니다. 사실 인터페이스는 객체 타입, 클래스, 다른 인터페이스 모두 상속받을 수 있습니다.
타입 별칭과 인터페이스는 미묘하지만 세 가지 면에서 차이가 납니다.
- 타입 별칭은 더 일반적이어서 타입 별칭의 오른편에는 타입 그리고 &, | 등의 타입 연산자를 포함한 모든 타입이 등장할 수 있습니다. 반면 인터페이스의 오른편엔 반드시 형태가 나와야 합니다. 예를 들어 아래와 같은 타입 별칭 코드는 인터페이스로 다시 작성할 수 없습니다.
- type A = number
- type B = A | string
- 인터페이스를 상속할 때 TypeScript는 상속받은 인터페이스의 타입에 상위 인터페이스를 할당할 수 있는지를 확인합니다. 아래의 예시를 살펴봤을 때 인터섹션 타입을 사용하면 상황이 달라집니다. 아래 예시에서 인터페이스는 타입 별칭으로 바꾸고 extends는 인터섹션(&)으로 바꾸면 TypeScript는 확장하는 타입을 최대한 조합하는 방향으로 동작합니다. 결과적으로 컴파일 에러가 발생하지 않고 bad를 오버로드한 시그니처가 만들어집니다.
- interface A {
- good(x: number): string
- bad(x: number): string
- }
- interface B extends A {
- good(x: string | number): string
- bad(x: string): string // 'number' 형식은 'string' 형식에 할당할 수 없습니다. ts(2430)
- }
- interface A {
- 이름과 범위가 같은 인터페이스가 여러 개 있다면 이들이 자동으로 합쳐집니다. 같은 조건에서 타입 별칭이 여러 개라면 컴파일 타임 에러가 납니다. 이를 선언 합침이라 부릅니다.
반응형
'👶 TypeScript' 카테고리의 다른 글
인터페이스 구현 (0) | 2023.01.15 |
---|---|
선언 합침 (0) | 2023.01.15 |
this를 반환 타입으로 사용하기 (0) | 2023.01.15 |
super (0) | 2023.01.14 |
클래스와 상속 (0) | 2023.01.14 |