TypeScript 추상 클래스(abstract): 메서드, 속성, 인터페이스와 차이

추상 클래스는 abstract로 표시된 기반 클래스입니다. new로 만들 수 없고, 본문 없는 abstract 메서드를 선언할 수 있으며, 모든 하위 클래스는 그것을 구현해야 합니다.

abstract class Shape {
    abstract area(): number; // no body: subclasses provide it

    describe(): string {
        // Concrete methods can call abstract ones.
        return `${this.constructor.name} with area ${this.area().toFixed(2)}`;
    }
}

class Circle extends Shape {
    constructor(private r: number) {
        super();
    }
    area(): number {
        return Math.PI * this.r ** 2;
    }
}

class Rect extends Shape {
    constructor(private w: number, private h: number) {
        super();
    }
    area(): number {
        return this.w * this.h;
    }
}

const shapes: Shape[] = [new Circle(1), new Rect(2, 3)];
for (const s of shapes) console.log(s.describe());
// Circle with area 3.14
// Rect with area 6.00

Shape는 모든 하위 클래스와 describe()를 공유하고, 각 하위 클래스가 area()를 제공하도록 강제합니다. Shape[] 타입은 하위 클래스를 어떻게 섞든 담습니다.

추상 클래스는 인스턴스를 만들 수 없다

추상 클래스에 new를 호출하면 컴파일 오류입니다. 만들어진 객체에 구현 없는 메서드가 있을 것이기 때문입니다.

// This does not compile: Shape is abstract.
abstract class Shape {
    abstract area(): number;
}

const s = new Shape();
console.log(s.area());

index.ts(6,11): error TS2511: Cannot create an instance of an abstract class.

이것은 컴파일 시점의 규칙입니다. abstract는 출력에서 지워지므로 출력된 Shape는 평범한 JavaScript 클래스이고, 타입 없는 JavaScript 코드는 여전히 new Shape()를 호출할 수 있습니다. 라이브러리에 런타임 보호가 필요하다면 생성자가 new.target을 확인할 수 있습니다.

abstract class Plugin {
    constructor() {
        if (new.target === Plugin) {
            throw new TypeError("Plugin is abstract; extend it");
        }
    }
    abstract run(): string;
}

class Hello extends Plugin {
    run(): string {
        return "hello";
    }
}

console.log(new Hello().run()); // hello

추상 메서드와 추상 속성

하위 클래스는 모든 추상 멤버를 구현하거나 자신도 추상이어야 합니다. 하나를 빠뜨리면 Non-abstract class 'Square' does not implement inherited abstract member area from class 'Shape' 같은 오류 TS2515가 나고, 여러 개를 빠뜨리면 그 모두를 나열하는 TS2654가 납니다.

필드, getter, 메서드 모두 추상일 수 있고, protected일 수도 있습니다.

abstract class Report {
    abstract readonly title: string;          // abstract property
    protected abstract rows(): string[];      // only for subclasses

    abstract get footer(): string;            // abstract getter

    render(): string {
        return [this.title, ...this.rows(), this.footer].join("\n");
    }
}

class SalesReport extends Report {
    readonly title = "Sales Q1";

    protected rows(): string[] {
        return ["Jan: 120", "Feb: 95", "Mar: 140"];
    }

    get footer(): string {
        return "Total: 355";
    }
}

console.log(new SalesReport().render());

추상 메서드에는 본문이 없습니다. 본문을 쓰면 오류 TS1245(Method 'x' cannot have an implementation because it is marked abstract)입니다. 추상 클래스가 추상 멤버를 반드시 가질 필요는 없습니다. abstract만 붙이면 직접 인스턴스를 만드는 것만 막습니다.

템플릿 메서드 패턴

추상 클래스를 쓰는 가장 흔한 이유입니다. 기반 클래스가 단계의 순서를 정하고, 각 하위 클래스가 달라지는 단계를 채웁니다.

abstract class Importer<T> {
    // The algorithm lives here, once.
    import(raw: string): T[] {
        const lines = raw.trim().split("\n");
        const records = lines.map((line) => this.parse(line));
        return records.filter((r) => this.isValid(r));
    }

    protected abstract parse(line: string): T;

    // A default subclasses may override.
    protected isValid(_record: T): boolean {
        return true;
    }
}

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

class PersonImporter extends Importer<Person> {
    protected parse(line: string): Person {
        const [name, age] = line.split(",");
        return { name, age: Number(age) };
    }

    protected override isValid(p: Person): boolean {
        return !Number.isNaN(p.age);
    }
}

console.log(new PersonImporter().import("Ada,36\nBob,x\nCy,29"));
// [ { name: 'Ada', age: 36 }, { name: 'Cy', age: 29 } ]

여기처럼 추상 클래스도 제네릭일 수 있으므로, 각 하위 클래스가 레코드 타입을 고릅니다.

추상 생성자 타입

추상 클래스의 typeof Shape는 호출할 수 없는 생성자이므로, typeof Shape 타입의 매개변수로는 new c()를 할 수 없습니다. 함수가 추상 클래스를 받아야 한다면(예를 들어 등록하거나 instanceof를 확인하기 위해) 추상 생성 시그니처로 타입을 지정하세요.

abstract class Animal {
    abstract sound(): string;
}
class Dog extends Animal {
    sound(): string {
        return "woof";
    }
}

type AbstractCtor<T> = abstract new (...args: never[]) => T;
type Ctor<T> = new () => T;

function isKind<T>(value: unknown, kind: AbstractCtor<T>): value is T {
    return value instanceof kind;
}

function create<T>(kind: Ctor<T>): T {
    return new kind();
}

const pet = create(Dog);     // fine: Dog is concrete
console.log(pet.sound());    // woof
console.log(isKind(pet, Animal), isKind("cat", Animal)); // true false
// create(Animal) is an error: Animal is abstract

abstract new는 추상 클래스와 구체 클래스를 모두 받고, 평범한 new는 구체 클래스만 받습니다.

추상 클래스와 인터페이스

경험칙: 모양만 기술하면 될 때는 인터페이스를(가장 흔한 경우이며 객체 리터럴에도 쓸 수 있습니다), 하위 클래스들이 실제 구현을 공유하고 빈 부분을 채우도록 컴파일러가 강제하기를 원할 때는 추상 클래스를 쓰세요. 둘은 잘 어울립니다. 공개 계약에는 인터페이스를, 그것을 구현하는 편리한 기반 하나로 추상 클래스를 쓰면 됩니다. 또 다른 흔한 비교는 interface와 type을 보세요.

흔한 실수

• 인터페이스로 충분한 곳에 추상 클래스 쓰기. 기반 클래스에 코드가 없다면, 런타임 무게와 단일 상속 제약이 더해진 인터페이스일 뿐입니다.
• static abstract 시도하기. 허용되지 않습니다. 정적 멤버는 추상일 수 없습니다.
• 추상 클래스에 new를 하면 런타임 오류가 날 거라 기대하기. new.target 검사를 직접 쓰지 않으면 오류는 없습니다.
• 기반 생성자에서 추상 메서드 호출하기. 하위 클래스의 필드가 초기화되기 전에 실행되므로, 구현은 그 필드를 undefined로 봅니다.