TypeScript extends: interface와 type 확장(상속)하기

interface Child extends Parent는 Parent의 모든 멤버와 자신의 멤버를 가진 새 인터페이스를 만듭니다. 자식 타입의 값은 부모의 모든 속성을 가지므로 부모가 기대되는 곳 어디서든 쓸 수 있습니다.

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

interface Dog extends Animal {
  breed: string;
  bark(): string;
}

const rex: Dog = {
  name: "Rex",
  age: 4,
  breed: "collie",
  bark() {
    return `${this.name} says woof`;
  },
};

function birthday(a: Animal): number {
  return a.age + 1;
}

console.log(rex.bark());    // Rex says woof
console.log(birthday(rex)); // 5: a Dog is also an Animal

같은 키워드가 TypeScript의 네 곳에서 서로 관련되지만 다른 의미로 나타납니다.

여러 인터페이스 확장하기

extends 뒤에 부모 여러 개를 쉼표로 구분해 나열합니다. 결과는 그 모두의 멤버를 갖습니다.

interface Identified {
  id: number;
}

interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

interface Post extends Identified, Timestamped {
  title: string;
}

// Post requires id, createdAt, updatedAt and title

두 부모가 같은 속성을 동일하지 않은 타입으로 선언하면, 자식이 그 속성을 두 타입 모두에 대입 가능한 타입으로 다시 선언하지 않는 한 자식은 오류 TS2320(Interface 'Post' cannot simultaneously extend types 'A' and 'B')입니다.

타입 별칭 확장하기

type 별칭에는 extends 절이 없습니다. 양쪽의 멤버를 합치는 교차 타입 &로 그 위에 쌓습니다. 인터페이스는 객체 타입 별칭을 직접 확장할 수도 있고, 타입 별칭은 인터페이스와 교차할 수 있습니다. 두 종류는 자유롭게 섞입니다.

type Timestamps = { createdAt: string; updatedAt: string };
type WithId = { id: number };

// type alias: extend with &
type Post = WithId & Timestamps & { title: string };

// interface: extends works on object type aliases too
interface Reply extends WithId, Timestamps {
  postId: number;
  body: string;
}

const post: Post = { id: 1, title: "Hello", createdAt: "2024-03-15", updatedAt: "2024-03-15" };
const reply: Reply = { id: 7, postId: 1, body: "Nice", createdAt: "2024-03-16", updatedAt: "2024-03-16" };

console.log(post.title, reply.body, reply.postId === post.id); // Hello Nice true

두 방법은 속성이 충돌하기 전까지는 똑같이 동작합니다. extends는 충돌하는 속성을 선언에서 보고하지만, &는 조용히 never로 만듭니다. 비교는 interface와 type 비교 페이지에, &의 세부 사항은 교차 타입 페이지에 있습니다.

속성 타입 재정의하기

자식 인터페이스는 부모 속성을 다시 선언할 수 있지만, 부모의 타입에 대입 가능한 타입으로만 가능합니다. string을 리터럴로 좁히거나 유니언에서 null을 없애는 것은 허용됩니다. 관련 없는 타입으로 바꾸는 것은 안 됩니다.

// This does not compile: kind cannot become a number
interface Shape {
  kind: string;
  color: string | null;
}

interface Circle extends Shape {
  kind: "circle"; // narrower than string: allowed
  color: string;  // narrower than string | null: allowed
  radius: number;
}

interface Label extends Shape {
  kind: number;   // not assignable to string: error
}

const c: Circle = { kind: "circle", color: "red", radius: 2 };
console.log(c);

index.ts(13,11): error TS2430: Interface 'Label' incorrectly extends interface 'Shape'.
  Types of property 'kind' are incompatible.
    Type 'number' is not assignable to type 'string'.

이 규칙은 Label을 Shape가 기대되는 모든 곳에서 여전히 쓸 수 있도록 하기 위해 존재합니다. kind가 숫자일 수 있다면, Shape를 위해 작성된 shape.kind.toUpperCase()를 호출하는 코드가 깨질 것입니다.

Omit으로 속성 바꾸기

상속받은 속성에 정말로 다른 타입이 필요하다면, 먼저 Omit으로 부모에서 그 속성을 제거한 다음 새 속성을 선언하세요. id와 날짜가 문자열로 도착하는 API 데이터를 변환하는 경우가 흔한 예입니다.

interface ApiUser {
  id: string; // the API sends ids as strings
  name: string;
  createdAt: string;
}

// Drop the properties to change, then declare them again
interface User extends Omit<ApiUser, "id" | "createdAt"> {
  id: number;
  createdAt: Date;
}

function toUser(raw: ApiUser): User {
  return { ...raw, id: Number(raw.id), createdAt: new Date(raw.createdAt) };
}

const u = toUser({ id: "42", name: "Ada", createdAt: "2024-03-15T10:30:00Z" });
console.log(u.id + 1, u.createdAt.toISOString()); // 43 2024-03-15T10:30:00.000Z

Omit<ApiUser, "id" | "createdAt">는 { name: string }이므로 새 id와 createdAt은 아무것과도 충돌하지 않습니다. Pick, Partial 등 다른 유틸리티 타입도 같은 방식으로 확장할 수 있습니다.

클래스의 extends

class Dog extends Animal은 JavaScript의 클래스 상속이며, 인터페이스의 extends와 달리 런타임에 존재합니다. Dog는 Animal의 생성자, 필드, 메서드 구현을 받고, new Dog(...) instanceof Animal은 true입니다. TypeScript는 그 위에 override 키워드 같은 타입 검사를 더합니다.

class Animal {
  constructor(public name: string) {}
  speak(): string {
    return `${this.name} makes a sound`;
  }
}

class Dog extends Animal {
  override speak(): string {
    return `${this.name} barks`;
  }
}

const pets: Animal[] = [new Animal("Generic"), new Dog("Rex")];
for (const p of pets) console.log(p.speak());
// Generic makes a sound
// Rex barks

클래스는 클래스 하나만 extends할 수 있지만, 인터페이스는 몇 개든 implements할 수 있습니다. implements는 아무것도 복사하지 않고, 인터페이스가 요구하는 것을 클래스가 선언했는지만 검사합니다. super, protected 멤버, override는 상속에서 다룹니다.

제네릭과 조건부 타입의 extends

꺾쇠괄호 안에서 extends는 제약입니다. <T extends { length: number }>는 숫자 length를 가진 어떤 타입 인수든 받고, 함수 본문에서 .length를 쓸 수 있게 합니다. 조건부 타입에서 T extends U ? X : Y는 T가 U에 대입 가능한지 묻습니다.

// Generic constraint: T must have a length property
function longest<T extends { length: number }>(a: T, b: T): T {
  return a.length >= b.length ? a : b;
}

console.log(longest("apple", "fig"));    // apple
console.log(longest([1, 2], [1, 2, 3])); // [ 1, 2, 3 ]

// @ts-expect-error: Argument of type 'number' is not assignable to parameter of type '{ length: number; }'.
longest(10, 20);

// Conditional type: a type-level if/else
type IsString<T> = T extends string ? "yes" : "no";
const a: IsString<"hi"> = "yes";
const b: IsString<42> = "no";
console.log(a, b); // yes no

두 곳 모두에서 extends는 인터페이스 형태가 검사하는 것과 같은 관계인 "대입 가능하다"를 뜻합니다. 제약은 제네릭 제약에서, 타입 수준의 검사는 조건부 타입에서 자세히 다룹니다.