[TypeScript] Interface와 Class의 차이점

 

📕 기본 정의

인터페이스

• 인터페이스는 ES6가 지원하지 않는 타입스크립트만의 특징입니다.
• 인터페이스는 타입이며 컴파일 후에 사라집니다.
• 추상 클래스는 선언과 구현이 모두 존재하지만 인터페이스는 선언만 존재하며, 멤버 변수와 멤버 메서드를 선언할 수 있지만 접근 제한자는 설정할 수 없습니다.
• 클래스와 달리 인터페이스는 TypeScript의 컨텍스트 내에서만 존재하는 가상 구조입니다.
• TypeScript 컴파일러는 타입 체크 목적으로만 인터페이스를 사용합니다. 코드가 JavaScript 언어로 트랜스 파일되면 인터페이스에서 제거됩니다.

클래스

• 클래스는 ES6에서 JavaScript 생태계에 공식적으로 도입되었습니다.
• 클래스는 객체지향 프로그래밍 그 자체입니다.
• 객체지향 프로그래밍은 커다란 문제를 클래스라는 단위로 나누고 클래스 간의 관계를 추가하면서 코드 중복을 최소화하는 개발 방식입니다. 클래스 간의 관계는 상속이나 포함 관계를 고려해 추가합니다.

 

 

🛠 사용 용도

인터페이스

• 커스텀 타입으로 사용됩니다. 인터페이스에는 필수 항목으로 사용할 프로퍼티를 선언해서, 함수에 전달하는 인자의 형식을 고정할 수 있습니다. 이 경우는 인터페이스를 인자로 받는 함수가 실행될 때 TypeScript 컴파일러가 인자의 유효성을 먼저 검사합니다.
• 추상 클래스로 사용됩니다. 메소드의 형태만 선언해서 인터페이스를 정의하고, 이후에 클래스를 정의할 때 implements 키워드를 사용하면서 이 인터페이스를 지정하면, 이 클래스는 추상함수로 선언된 메소드의 몸체를 받아들여야 합니다. 

 

클래스

• 객체 팩토리로 사용됩니다. 클래스는 객체의 모양과 동작에 대한 청사진을 정의한 다음 클래스 속성을 초기화하고 method를 정의합니다. 따라서 클래스의 인스턴스를 만들 때 실행 가능한 함수와 정의된 property를 가진 객체를 얻습니다. 

 

 

❓ 추상 클래스란?

추상 클래스는 구체 클래스가 가져야 하는 속성과 함수를 설정하는 클래스입니다. 구체 클래스의 설계서 혹은 도면이라고 할 수 있습니다. 하지만 추상 클래스는 구체 클래스의 도면 혹은 설계서이므로 객체 인스턴스를 생성할 수 없습니다. 만약, 추상 클래스의 객체 인스턴스를 생성하는 경우 TypeScript는 Cannot create an instance of an abstract class.라는 오류를 표시합니다.

 

❓ TypeScript의 추상 클래스

타입스크립트(TypeScript)에서 추상 클래스를 사용하는 가장 일반적인 용도는 하위 클래스(=구체 클래스)에서 공통 동작을 찾는 것입니다. 그리고 추상 클래스는 객체 인스턴스화할 수 없다는 것을 알고 있다는 전제하에 사용합니다.

 

 

👨🏻‍⚖️ 결론

• new키워드를 쓰지 않고 상속의 구현만 할것이라면 Interface를 사용해도 무방합니다.
• 함수나 클래스는 할당되는 문법이 따로 있기 때문에 보통 객체에서 Interface를 많이 사용합니다.

 

 

 

 

참고

자세한 내용과 예시들을 보고 싶다면 아래의 링크들로 이동해서 읽어주세요. 아래의 글들을 참고하여 작성했습니다.

 

[짤막글] Interface와 Class의 차이점

TypeScript 클래스와 인터페이스

[TypeScript]추상 클래스(Abstract Class)