TS016. 타입스크립트 타입, 인터페이스 상속과 오버라이딩

인터페이스와 타입의 상속

• 타입스크립트에서 interface 와 type 둘 다 상속 기능이 있다.
• 사실 type 의 경우엔 extends 키워드를 직접 이용하는 것은 아니지만 거의 흡사하다.

인터페이스 상속

• 인터페이스 상속은 여타 언어처럼 extends 를 통해 가능하다.

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

// 상속 가능
interface User extends Person {
  id: string;
}

const user: User = {
  id: "abc",
  name: "김모씨",
  age: 10,
};

타입 상속

• 타입의 상속은 intersection(&) 을 통해 가능하다.

type PersonT = {
  name: string;
  age: number;
};

type UserT = PersonT & {
  id: string;
};

const userT: UserT = {
  id: "abc",
  name: "김모씨",
  age: 10,
};

인터페이스가 타입을 상속하거나 타입이 인터페이스를 상속

• 타입스크립트에서는 interface 가 type 을 상속할 수도 있고, type 이 interface 를 상속할 수도 있다.

// 인터페이스가 타입을 상속할 수도 있음
interface UserI extends PersonT {
  id: string;
}

// 타입이 인터페이스와 인터섹션을 하는 것도 가능
type UserT2 = Person & {
  id: string;
};

다중 상속

• 타입스크립트에서는 아무런 문제 없이 다중상속이 허용된다.
• 아마 자바와 달리 무리없이 다중 상속이 가능한 이유는 구현까지 상속하지 않기 때문일 것이다.

타입의 다중 상속

type ContactT = {
  phone: number;
  email: string;
};

type BodyInfoT = {
  height: number;
  weight: number;
};

// 타입에서 여러 개의 Intersection 가능
type HumanInfoT = Person & ContactT & BodyInfoT;

인터페이스의 다중 상속

interface Contact {
  phone: number;
  email: string;
}

interface BodyInfo {
  height: number;
  weight: number;
}

// 인터페이스에서 여러 개의 상속 가능
interface HumanInfo extends Contact, BodyInfo, Person {}

인터페이스와 타입 오버라이딩

• 타입이나 인터페이스를 상속한 뒤 오버라이딩 되는 경우 주의하는 것이 좋다.

인터페이스 오버라이딩 1: 다른 타입으로 변경

• 다른 타입으로 변경하려 하면 타입의 경우 오버라이드하면 never 타입이 되어버리고, 인터페이스의 경우 컴파일타임에 빨간줄 에러가 뜬다.

interface Coordinates {
  x: string;
  y: string;
  name: string;
}

interface numberCoordinates extends Coordinates {
  x: string; // 가능 (원래 타입을 한번 더 적어준 것)
  y: number; // 불가능 (상속받은 것과 다른 타입으로 같은 프로퍼티 사용 불가), 타입에서 never 타입이 나오는 경우와 같음, 인터페이스는 애초에 불가능
}

인터페이스 오버라이딩 2: 내로잉

• 타입을 좁히는 내로잉의 경우 오버라이딩해도 아무런 문제가 없다.

interface FlexibleWeightI {
  weight: number | string;
}

interface WeightI extends FlexibleWeightI {
  weight: number;
}

const weightI: WeightI = {
  weight: 1, // number | string 에서 내로잉되어 number 로 변경됨
};

타입 오버라이딩 1: 다른 타입으로 변경

type DetailedBodyInfoT = BodyInfo & {
  weight: string;
};

const detailedBodyInfo: DetailedBodyInfoT = {
  weight: "abc", // never 타입으로 나옴 (number 와 string 이 동시에 되어야 함, primitive 2개를 intersection 하면 never 타입이 됨)
  height: 100,
};

타입 오버라이딩 2: 내로잉

type FlexibleWeight = {
  weight: number | string;
};

type Weight = FlexibleWeight & {
  weight: number;
};

const weight: Weight = {
  weight: 100, // number 타입으로 나옴, union 타입에서 intersection 을 시켜 타입이 narrowing 됨
};