typescript, Interface 와 class의 차이

기존 javascript와 달리 typescript를 시작하면서 Interface와 class의 차이점에 대한 이해가 부족해 Interface와 class의 차이를 먼저 알아보고 시작하려고 합니다.

class부분을 진행하면서 어려움을 겪어서..

Interface

ES6가 지원하지 않는 typescript 특징입니다. Interface는 compile후 사라지는 특징이 있습니다. Interface는 선언만 존재하고, 변수와 메서드 선언할 수 있지만 접근 제한자 설정이 불가능합니다. (type 체크 목적으로 Interface를 사용합니다.)

class

ES6 Javascript에서 도입됐습니다.
class 간 관계를 추가해 코드 중복을 최소화하는 개발 방식입니다. class는 객체지향 프로그래밍으로 볼 수 있고, class 간 관계는 상속이나 포함 관계를 추가합니다.
(객체지향 프로그래밍은 따로 글을 작성해보겠습니다.)

Interface 예시

Property를 선언 해 함수에 전달하는 인자의 형식을 고정할 수 있습니다. Interface를 인자로 받는 함수가 실행될 때 typescript compiler가 인자 유효성 검사를 먼저 검사합니다.

interface Chicken {
	name: string;
    checkBorn: string[];
}

let chicken: Chicken;

function createChicken(name: string, checkBorn: string[]){
	return {
    	name,
        checkBorn,
    }
}

chicken = createChicken("Original", ["soonsal", "born"]);

Interface Implements 활용 방법

interface checkTime {
	currentTime: Date;
}

class Clock implements checkTime {
	public currentTime: Date;
    // private currentTime: Date; Error를 발생시킨다.
}

const AppleWatch: checkTime = new Clock();

class 예시

class는 객체의 모양과 동작에 대한 청사진을 정의한 다음 class 속성을 초기화하고 method를 정의합니다. 따라서 class의 Interface를 만들 때 실행 가능한 함수와 정의된 property를 가진 객체를 얻습니다.

class chickenMaker {
	static create(event: {name: string; side: string[]}) {
    	return {name: event.name, side: event.side};
    }
}

class 사용 시 별도 인스턴스 없이 static 함수를 사용해 인스턴스를 만들 수 있습니다.
(Interface에서는 type 체크만 가능할 뿐 위와 같이 코드 작성이 불가능)

하지만 static이 없는 경우 인스턴스를 생성해야 합니다.

무엇을 사용해야 할까?

Interface

특정 유형의 객체들이 동일한 속성을 가지고 있을 때 Interface를 통해 쉽게 구현할 수 있다.
(type 체크 용도라면 Interface 사용이 좋다.)

class

constructor 또는 함수 구현 시 class를 사용하는 것이 좋다.

요약

type 체크만 필요로 하는 경우에는 Interface 사용이 좋다. 일반적으로 Interface 사용이 많아 보인다. 따라서 class가 익숙하지 못했다.

추가 (2022-12-17)

class와 interface의 차이, interface는 instance화 할 수 없고 compile 할 수 없지만, class는 instance화 가능하고, compile 됩니다.