[ts] 클래스 extends, implements 에 대해서

계기: 코드를 보다가 클래스의 extends 와 Implements 가 나왔는데, 특히 implements 에 대해서 잘 몰라서 찾아봤습니다.

참고링크 : https://stackoverflow.com/questions/38834625/whats-the-difference-between-extends-and-implements-in-typescript

What's the difference between 'extends' and 'implements' in TypeScript

 

1. class 의 extends 기능

클래스의 extends 는 클래스를 확장시킬 때 사용됩니다. 그리고 부모, 자식 관계가 형성됩니다. (부모 , 자식 관계의 프로토타입 체인이 형성됨)

class Person {
    region: string;
    name: string;
    age: number;

    constructor(name, age, region) {
        this.name = name;
        this.age = age;
        this.region = region;
    }

    eat(food) {
        console.log(`${this.name} is eating ${food}`);
    }
}

class Gak extends Person {
    name: string;
    age: number;
    region: string;
    h : number;

    constructor(name, age, region, h) {
        super(name, age, region);
        this.h = h;
    }
}

const gak = new Gak("gak", 15, "seoul", 133);
console.log(gak);

위의 코드에서 Gak 이라는 클래스는 Person 클래스를 확장시켜서 만들었습니다.

즉, Gak 클래스의 인스턴스는 Person 클래스의 인스턴스의 값들을 기본으로 가지고, 거기다 추가로 특정 기능을 가집니다.

즉, Gak 의 부모가 Person 이 되며, Gak 인스턴스에서 Person 에 있는 속성이나 메서드에 접근했을때 프로토타입 체인을 타고 부모에게로 가서 사실상 부모인 Person 의 속성이나 메서드에 접근하는 것이지요.

 

2. class 의 implements 기능

클래스의 implements 는 (내가 공부한 바로는) 타입스크립트 interface 를 값으로 받으며, 해당 값으로 클래스의 타입을 설정하는 역할을 한다.

interface Person {
    name: string;
    age: string;
    eat(): void;
}

class SuperMan implements Person{
    name: string;
    age: string;

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    eat() {
        console.log(this.name);
    }
}

const Jack = new SuperMan("Jack", "15");
Jack.eat();

SuperMan 이라는 클래스는 Person 이라는 interface 를 Implements(도구) 로 받는다.

이때 SuperMan 클래스의 인스턴스에는 최소한 Person Interface 에 속한 내용들이 존재해야한다.