[TS] Extends와 Implements 차이 (Difference between extends and implements)

 

안녕하세요 Foma 💻 입니다.

 

오늘은 TS에서 클래스 옆에 extends와 implements가 순간 헷갈려서 정확히 기억하기 위해 정리하려고 합니다.

 

바로 시작할게요~

---

Extends

 

상속받고자 하는 부모 클래스를 명시하는 것.

 

즉, extends에 원하는 클래스를 명시하면 해당 클래스의 프로퍼티와 메서드를 따로 구현하지 않아도 인스턴스에서 자유롭게 사용 가능합니다.

 

쉽게 말해  "부모가 가진 거 너 맘대로 써도 돼~" 라는 것과 같습니다.

 

아래와 같이 부모 클래스를 만들어 줍니다.

 

class Parent {
  public lastName: string = "An";

  public speakKorean() {
    console.log("안녕하세요");
  }

  public eatWithChopsticks() {
    console.log("젓가락으로 먹기");
  }
}

 

자식 클래스를 만들어 아래와 같이 extends를 통해 Parent를 상속 받아줍니다.

 

class Child extends Parent {}

 

child 인스턴스를 생성해주면 아래와 같이 부모 프로퍼티와 메서드를 사용할 수 있습니다.

 

let child = new Child();
console.log(child.lastName); //An
child.speakKorean(); //안녕하세요
child.eatWithChopsticks(); //젓가락으로 먹기

---

Implements

 

미리 추상화 된 인터페이스를 채택하여 사용하는 것

 

상속(extends)와 다르게 implements로 어떤 인터페이스를 채택하면 추상화 된 메서드나 프로퍼티를 반드시 구현해주어야 합니다.

 

쉽게 말하면 "해당 클래스는 이 인터페이스 모양이니깐 반드시 이 조건을 가져야 해!" 라는 것과 같습니다.

 

아래와 같이 사람이라면 반드시 가져야 할 메서드와 프로퍼티를 정의해 놓습니다.

 

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

 

Person을 위 Child 클래스에 채택하면 아래와 같이 Child 아래에 Person 형태의 프로퍼티와 메서드를 구현하라고 에러가 발생합니다.

 

 

Person에 정의된 메서드와 프로퍼티를 직접 구현해 줍니다.

 

class Child implements Person {
  name: string = "Fomagran";
  
  think(): void {
    console.log("생각하기");
  }
  walk(): void {
    console.log("걷기");
  }
  eat(): void {
    console.log("먹기");
  }
}

 

아래와 같이 구현된 메서드와 프로퍼티를 사용할 수 있습니다.

 

const child = new Child()
console.log(child.name); // Fomagran
child.think() //생각하기
child.walk() //걷기
child.eat() //먹기

---

오늘은 이렇게 extends와 implements의 차이점에 대해 알아보았는데요.

 

extends는 이미 구현된 메서드와 프로퍼티를 편하게 사용할 때 쓰면 유용할 거 같고, implements는 어떠한 조건을 강제할 때 사용하면 유용할 것 같다는 생각이 들었습니다.

 

혹시라도 틀린 점이 있거나 궁금하신 점이 있다면 아래 댓글로 알려주세요!