[TypeScript] 추상 메서드 vs 인터페이스 차이 (abstract vs interface)

Typescipt에서의 차이

 

추상메서드의 예시는 아래와 같다

abstract class Test {
    constructor(
        protected nickname: string,
        protected level: number
    ) { }

    abstract attack(): void
    abstract guard(): void
}

class Player extends Test {
    attack(): void {
        console.log("Attack");
    }
    guard(): void {
        console.log("shiled")
    }
}

 

다음은 인터페이스 예시이다.

interface Test2 {
    nickname:string,
    level:number,
    attack():void,
    guard():void
}

class Player2 implements Test2 {
    constructor(
        public nickname:string,
        public level:number
    ){}

    attack(){
        console.log("Attack");
    }
    guard(){
        console.log("shiled")
    }
}

 

 

차이를 보자면

 

추상메서드에서는 private, protected 같은 접근제어자를 사용가능하지만

 

인터페이스에서는 사용하지 못한다.

 

추상메서드는 상속시에 constructor를 자식클래스한테 자동생성 되지만 

 

인터페이스는 직접 적어야한다.

 

---

 

 

TypeScript 코드에서는 이런 차이가 있지만 컴파일되고나서 js 코드로 가보면 또 다르다.

 

위의 코드를 컴파일 한 후 의 js코드 이다

Javascript

 

추상메서드

class Test {
    constructor(nickname, level) {
        this.nickname = nickname;
        this.level = level;
    }
}
class Player extends Test {
    attack() {
        console.log("Attack");
    }
    guard() {
        console.log("shiled");
    }
}

 

인터페이스

class Player2 {
    constructor(nickname, level) {
        this.nickname = nickname;
        this.level = level;
    }
    attack() {
        console.log("Attack");
    }
    guard() {
        console.log("shiled");
    }

 

 

추상메서드를 컴파일 했을 때는 추상클래스가 일반클래스로 바뀌어서 보이지만

 

인터페이스는 보이지 않는다.