[인터페이스] 인터페이스 확장하기

해당 게시글은

강의 사이트, 인프런에서 이정환님이 진행하시는

'한 입 크기로 잘라먹는 타입스크립트' 를

들어보며 블로그를 작성하려고 합니다.

다음 게시글 내용은 해당 강의에 핸드북의 내용으로

출처는 다음과 같습니다.

 

https://ts.winterlood.com/7250edd7-a3fd-4662-b756-f11f927c73f2

타입스크립트를 소개합니다 - 타입스크립트 개론

 

section5//chapter1.ts 에서 실습을 진행했습니다.

 

인터페이스 확장

인터페이스 확장이란

하나의 인터페이스를 다른 인터페이스들이 상속받아

중복된 프로퍼티를 정의하지 않도록 도와주는 문법입니다.

말로만 하면 어려우니 예제와 함께 살펴보겠습니다.

 

다음과 같이 3개의 타입이 정의되어 있다고 가정하겠습니다.

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

interface Dog {
  name: string;
  age: number;
  isBark: boolean;
}

interface Cat {
  name: string;
  age: number;
  isScratch: boolean;
}

interface Chicken {
  name: string;
  age: number;
  isFly: boolean;
}

각 타입들을 자세히 살펴보면 Animal 타입을 기반으로

Dog, Cat, Chicken 이

각각의 추가적인 프로퍼티를 갖고 있는 형태임을 알 수 있습니다.

추가로 name 그리고 age 프로퍼티가

모든 타입에 중복해서 정의되어 있다는 점도 함께 알 수 있습니다.

 

중복 코드는 언제나 좋지 않습니다.

만약 다음과 같이 Animal 타입의 프로퍼티가 변경된다면

interface Animal {
  name: string;
  ages: number; // 수정
}

 

이를 기반으로 하는 나머지 타입들도

다음과 같이 다 일일히 수정되어야 할 것입니다.

interface Dog {
  name: string;
  ages: number; // 수정
  isBark: boolean;
}

interface Cat {
  name: string;
  ages: number; // 수정
  isScratch: boolean;
}

interface Chicken {
  name: string;
  ages: number; // 수정
  isFly: boolean;
}

 

이렇게 특정 인터페이스를 기반으로 여러개의 인터페이스가 파생되는 경우

중복 코드가 발생할 수 있는데

이럴 때에는 인터페이스의 확장 기능을 이용하면 좋습니다.

 

확장은 다음과 같습니다.

interface Animal {
  name: string;
  color: string;
}

interface Dog extends Animal {
  breed: string;
}

interface Cat extends Animal {
  isScratch: boolean;
}

interface Chicken extends Animal {
  isFly: boolean;
}

 

interface 타입이름 extends 확장할 타입이름 형태로

extends 뒤에 확장할 타입의 이름을 정의하면

해당 타입에 정의된 모든 프로퍼티를 다 가지고 오게 됩니다.

따라서 Dog, Cat, Chicken 타입은 모두

Animal 타입을 확장하는 타입이기 때문에

name, age 프로퍼티를 갖게 됩니다.

interface Animal {
  name: string;
  color: string;
}

interface Dog extends Animal {
  breed: string;
}

(...)

const dog: Dog = {
  name: "돌돌이",
  color: "brown",
  breed: "진도",
};

이때 확장 대상 타입인 Animal 은 Dog 타입의 슈퍼타입이 됩니다.

 

---

프로퍼티 재정의하기

다음과 같이 확장과 동시에 프로퍼티의 타입을 재정의 하는 것 또한 가능합니다.

interface Animal {
  name: string;
  color: string;
}

interface Dog extends Animal {
  name: "doldol"; // 타입 재 정의
  breed: string;
}

Dog 타입은 Animal 타입을 확장하며 동시에

name 프로퍼티의 타입을 String 타입에서

"doldol" String Literal 타입으로 재정의 했습니다.

이렇게 확장받는 타입에서 프로퍼티의 타입을 재정의할 수 있습니다.

 

그런데 한 가지 주의할 점은

프로퍼터를 재정의할 때는 원본 타입을 A,

재정의된 타입을 B 라고 하면,

반드시 A 가 B 의 슈퍼타입이 되도록 재정의해야 합니다.

 

따라서 다음과 같이 name 을 Number 타입으로 재정의하는 것은 불가능합니다.

interface Animal {
  name: string;
  color: string;
}

interface Dog extends Animal {
  name: number; // ❌
  breed: string;
}

그 이유는 Dog 타입이 Animal 타입을 확장한다는 것은 

Animal 타입의 서브타입이 된다는 의미입니다.

그런데 name 프로퍼티를 Number 타입으로 재정의 해버리면

이제는 Dog 는 Animal 의 서브타입이 아니게 됩니다.

따라서 이런 재정의는 불가능한 것입니다.

 

타입 별칭을 확장하기

참고로 인터페이스는 인터페이스 뿐만 아니라

타입 별칭으로 정의된 객체고 확장할 수 있습니다.

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

interface Dog extends Animal {
  breed: string;
}

 

다중 확장

또 여러개의 인터페이스를 확장하는 것 또한 가능합니다.

interface DogCat extends Dog, Cat {}

const dogCat: DogCat = {
  name: "",
  color: "",
  breed: "",
  isScratch: true,
};