01.Extending.the.Interface.md

1. 인터페이스 확장하기

인터페이스 확장

인터페이스 확장이란 하나의 인터페이스를 다른 인터페이스들이 상속받아 중복된 프로퍼티를 정의하지 않도록 도와주는 문법임.

다음과 같이 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 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;
}

🚨 주의할점

• 프로퍼티를 재정의할 때 원본 타입을 A, 재정의된 타입을 B라고 하면 반드시 A가 B의 슈퍼타입이 되도록 정의해야함

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

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

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

why? 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,
};