성장에 목마른 코린이

TypeScript 9. Interfaces part 2 본문

TypeScript

TypeScript 9. Interfaces part 2

성장하는 코린이 2022. 8. 1. 00:40
728x90

Interfaces

시작하기전에, 추상 클래스에 대해 한번 더 복습해보자고 한다.

왜냐하면 여기서 추상화를 원할 때 클래스와 인터페이스를 사용할 때의 차이점에 대해 알아보려하기 때문이다.

추상 클래스는 그것으로부터 인스턴스를 만드는걸 허용하지 않습니다.

new User를 만들수 없습니다.

추상 클래스는 상속받는 클래스가 어떻게 동작해야할 지 알려주기 위해 사용됩니다.

추상 클래스를 사용하는 것이 멋있다고 생각하는데

클래스를 어떻게 구현할지에 대해서는 말해주지 않지만, 무엇을 구현해야 할지에 대해서는 알려줄 수 있기 때문이다.

 

추상 클래스의 문제점은, 자바스크립트에는 abstract의 개념이 없다는 것이다.

그럼 왜 추상 클래스를 사용하냐면, 표준화된 property와 메소드를 갖도록 해주는 청사진을 만들기 위해서이다.

 

그럼 인터페이스에 대해 다시 얘기해보면, interface는 가볍습니다.

interface는 컴파일하면 JS로 바뀌지 않고 사라집니다.

그럼 인터페이스를 쓸 때 클래스가 특정 형태를 따르도록 어떻게 강제하는지에 대한 질문이 떠오를 수 있는데,

이건 엄청 중요한 질문입니다.

일단 제가 하고 싶은 건 추상클래스를 interface로 바꾸는 것입니다.

interface는 constructor가 없고 abstract 메소드도 없습니다.

하지만 interface는 오브젝트나 클래스의 모양을 묘사하도록 해줍니다.

아래의 예시를 통해 어떻게 클래스가 특정 형태를 따르도록 강제하는지 볼 수 있습니다.

먼저 이렇게 interface로 첫번째 예시와 똑같은 기능을 하게끔 만들어 보았는데요,

기존에는 extend를 사용했지만, 지금은 implements를 사용하고 있는 걸 볼 수 있습니다.

자바스크립트는 클래스 뒤에 extends를 붙이는 문법을 사용해 클래스를 상속받을 수 있습니다.

하지만 타입스크립트에서는 자바스크립트가 사용하지 않는 implements 라는 단어를 쓰는데요,

implements를 쓰면 가장 먼저 코드가 더 가벼워집니다.

자바스크립트에서는 존재하지 않기에 User 인터페이스를 추적할 수가 없습니다.

그리고 interface를 상속할 때에는 property를 private나 protected로 만들지 못하고 public으로만 만들 수 있습니다.

그리고 아까 질문을 대답하자면, interface를 만들어 implements를 통해 상속받을 때

이렇게 클래스가 특정 형태를 따르게 강제하게끔 에러를 출력하는 것을 볼 수 있습니다.

그리고 interface part 1에서 배웠던 여러 interface를 합칠 수 있는 기능이 여기서 유용하게 쓰입니다.

이렇게 implements를 이용해 여러 interface를 사용할 수 있기에 필요한 기능을 합쳐서 쓸 수 있어 너무 유용하겠죠.

 

Comments