[TS] extends와 implements

 

extends와 implements의 차이에 대하여

 

---

 

서론 

extends는 자바스크립트, 타입스크립트에서 어떠한 클래스를 상속 받기 위해 사용하는 키워드입니다.

implements는 타입스크립트에서 인터페이스를 구하기 위해 사용하는 키워드입니다.

 

 

extends

extends 키워드는 어떠한 class의 하위 클래스를 생성할 때 사용합니다. (관련문서)

 

클래스 간의 상속을 구현하기 위해 사용합니다.

`class A extends B { ... }`는 클래스 A가 클래스 B의 모든 멤버(메서드, 속성 등)를 상속받는다는 것을 의미합니다.

 

단일 상속만 허용되므로 한 클래스는 여러 클래스를 동시에 확장할 수 없습니다.

내장 객체 및 사용자 정의 클래스의 하위 클래스를 만드는 데에 사용됩니다.

 

 

implements

implements는 키워드는 인터페이스*를 구현할 때 사용됩니다.

* 인터페이스는 객체가 가져야 하는 속성과 메서드의 형태를 정의하는데에 쓰입니다.

 

implements를 사용해 특정 class가 interface에 만족하는지 확인하는지 확인할 수 있습니다. (관련문서)

interface에 정의된 멤버가 정의되지 않았다면 에러가 나타납니다.

interface Pingable {
  ping(): void;
}
 
class Sonar implements Pingable {
  ping() {
    console.log("ping!");
  }
}
 
class Ball implements Pingable {
Class 'Ball' incorrectly implements interface 'Pingable'.
  // Property 'ping' is missing in type 'Ball' but required in type 'Pingable'.
  pong() {
    console.log("pong!");
  }
}

 

위의 예시에서 Ball 클래스는 Pingable 인터페이스를 implements하고 있습니다.

하지만 정의된 ping 메서드를 구현하지 않아 에러가 발생한 모습입니다.

 

 

주의할 점은  implements는 해당 클래스가 인터페이스에 부합하는지만 확인한다는 점 입니다.

interface A {
  x: number;
  y?: number;
}
class C implements A {
  x = 0;
}
const c = new C();
c.y = 10; // err : Property 'y' does not exist on type 'C'.

 

위 예제에서 인터페이스 A는 x와 y 두 개의 속성을 가지고 있습니다. 

그리고 y 속성은 optional로 정의되어 있습니다.

 

A를 implements한 클래스 C는 A에 조건에 부합하기에 오류가 발생하지 않습니다.

그러나 실제로 y속성은 존재하지 않죠. 즉, 조건에는 부합했으나 해당 속성이 만들어진건 아닙니다. 

그래서 c.y에 접근하려고 하니 에러가 나게 된겁니다.

 

또한 `class C implements A, B { ... }`와 같이 여러개의 인터페이스를 확장할 수 있습니다. (extends는 불가능)

 

 

정리

extends 

하위클래스를 만들기 위해, 즉 '상속'을 위해 사용합니다.
상위클래스에는 존재하지만 하위클래스에 명시하지 않은 프로퍼티들은 상위 클래스의 초기값으로 선언될 뿐 에러는 발생하지 않습니다.

implements 

새로운 클래스의 프로퍼티를 인터페이스와 동일하게 정의하고 싶을 때 사용합니다.
인터페이스스에 정의한 프로퍼티들은 전부 명시적으로 작성되어야 하며, 빠진 프로퍼티가 있는 경우 에러를 반환합니다.

 

 

 

감사합니다.

 

---

 

 

공부한 내용을 복습/기록하기 위해 작성한 글이므로 내용에 오류가 있을 수 있습니다.