TypeScript 에서 Class 와 Interface 의 차이!!
기본정의
인터페이스
- ES6가 지원하지 않는 타입스크립트 만의 특징.
- interface 는 타입이고, 컴파일 후에 사라짐.
- 인터페이스는 선언만 존재
- 멤버 변수와 멤버 메서드를 선언할 수는 있으나 접근 제한자는 설정할 수 없다.
- 타입 체크목적으로만 인터페이스를 사용 -> Javascript 언어로 트랜스 파일되면 인터페이스에서 제거됨!
접근제한자 는 무엇..? 클래스 및 인터페이스 그리고 이들이 가지고 있는 멤버의 접근을 말한다.
- public 접근 제한자: 단어 뜻 그대로 외부 클래스가 자유롭게 사용할 수 있도록 한다.
- protected 접근 제한자: 같은 패키지 또는 자식 클래스에서 사용할 수 있도록 한다.
- private 접근 제한자: 단어 뜻 그대로 개인적인 것이라 외부에서 사용될 수 없도록 한다.
클래스
- 클래스는 ES6 에서 JavaScript 생태계에 공식적으로 도입.
- 객체지향 프로그래밍은 커다란 문제를 클래스라는 단위로 나누고, 클래스 간의 관계를 추가 -> 코드중복을 최소화하는 개발방식
- 상속 , 포함 관계를 고려하자.
사용 용도
인터페이스
- 커스텀 타입으로 사용
- 필수 항목으로 사용할 프로퍼티를 선언 -> 함수에 전달하는 인자의 형식을 고정한다.
1
2
// req arg, res arg 의 타입을 정해주어 , 함수에 전달하는 인자의 형식을 고정함!
getWmsParcelList: build.query<GetParcelsResponse, GetParcelsProps>
- 함수가 실행 될 때 TypeScript 컴파일러가 인자의 유효성을 먼저 검사함!
- 추상 클래스로 사용됨. 메소드의 형태만 선언해서 인터페이스를 정의, 이후 클래스를 정의할 때
implements키워드를 사용하면서 이 인터페이스를 지정하면 , 이 클래스는 추상함수로 선언된 메소드의 몸체를 받아들여야 함 .
추상화란 무엇일까…?
여러가지 사물이나 개념에서 공통되는 특성이나 속성 따위를 추출하여 파악하는 작용 구체적인 것을 감추고 보고 싶어하는 전체적인 특성을 드러내는 것 추상화는 표현의 일부!! 소프트웨어 개발관점에서 추상화란 ? 인터페이스에 의존 하고, 구체적인 구현에는 의존하지 않는다! 보통 함수를 기본적인 추상화 방법으로 사용한다. 실제 출력에 대해 어떻게 동작하는지 알지 못하지만, 무엇을 하는지 알고 사용한다. 함수를 작게 만드는 것이 핵심이며, 함수가 하는 일도 하나여야 한다. 그 하나의 역할이 함수의 이름으로 표현되고, 이름만 가지고 무슨 역할을 하는지 명확히 파악되어야 한다! 함수가 커진다 -> 추상화를 제대로 하지 않은것! 함수 내 블록화된 코드를 묶어서 새로운 함수를 만듬 -> 그 블록에 대한 지식을 대표적으로 표현하기 위한 추상화 코드의 재사용성, 가독성 향상 , 생산성 증가, 에러감소 -> 유지보수 시간 단축
1
2
3
4
5
6
7
8
9
implements 의 경우, 인터페이스를 기반으로 클래스를 생성할 수 있다.
interface Product {
itemName: string;
}
class ProductList implements Product {
public itemName: string;
}
const list: Product = new ProductList();
클래스
- 객체 팩토리로 사용됨
- 객체의 모양과 동작에 대한 청사진을 정의 -> 클래스 속성을 초기화하고 method를 정의
- 클래스의 인스턴스를 만들 때 실행 가능한 함수 & 정의된 property 를 가진 객체를 얻는다.
클래스를 정의하는 예를 보자.
1
2
3
4
5
class PizzaMaker {
static create(event: { name: string; toppings: string[] }) {
return { name: event.name, toppings: event.toppings };
}
}
클래스를 이용할 경우 별도 인스턴스를 만들지 않고도 static 함수를 사용하여 인스턴스를 만들 수 있다.
다음과 같이 create 함수를 호출할 수 있다. (interface 에서는 타입체크만 가능하고, 이러한 인스턴스 생성은 불가하다)
1
2
3
4
const pizza = PizzaMaker.create({
name: "Inferno",
toppings: ["chessse", "peppers"],
});
만약 static 을 적용시키지 않았다면 , new 인스턴스 생성자를 통해 만들어 주어야 한다. class 는 말 그대로 청사진 이므로, 청사진을 이용해 인스턴스를 만들어줘야 실제로 사용 가능한 것이다.
언제 어떤것을 사용할까…?
인터페이스
- Interface 를 사용하는 경우 : 코드에서 둘 이상의 위치, 특히 둘 이상의 파일 또는 함수에서 사용될 객체의 속성 및 함수를 생성해야하는 경우. 특정 유형의 객체들이 동일한 속성을 가지고 있을 때 , interface 를 통해 이를 쉽게 구현할 수 있다.
- Interface를 사용하지 않는 경우: 타입 체크뿐만 아니라 constructor 또는 함수의 구현을 원할 때는 Class 를 사용한다.
클래스
- Class 를 사용하는 경우 : 함수를 포함하고 있는 객체를 만들다 보면 초기화를 위한 constructor 가 있는경우가 있다. 이 경우는 Class 를 사용하는 것이 옳다.
- Class를 사용하지 않는 경우: 단순히 타입체크를 용이하게 하려는 경우는 interface 를 사용하는것이 효율적!
결론!
상속의 구현만 할것이라면 interface 함수나 클래스는 할당되는 문법이 따로 있다, constructor 있으면 class
타입체크만 할것이면 interface, 함수를 갖고있다면 class 로 하는것이 바람직.
참조 : https://choi3950.tistory.com/25, https://velog.io/@kysung95/%EC%A7%A4%EB%A7%89%EA%B8%80-Interface%EC%99%80-Class%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90