[TypeScript] interface를 이용한 타입 지정

❓ interface

인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다.

인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다.

인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것이다.

ES6는 인터페이스를 지원하지 않지만 TypeScript는 인터페이스를 지원한다.

 

인터페이스는 프로퍼티와 메소드를 가질 수 있다는 점에서 클래스와 유사하나 직접 인스턴스를 생성할 수 없고 모든 메소드는 추상 메소드이다. 단, 추상 클래스의 추상 메소드와 달리 abstract 키워드를 사용하지 않는다.

---

바로 예제로 살펴보자

 

❗ interface 사용법

   type BoxType = {
    color :string, 
    width :number
   }

   interface BoxInterface {
    color :string, 
    width :number
   }

보는바와 같이 상당히 유사한 형태를 띄고있다.

---

하지만 "차이점"에 대해선 아래 예제에서 볼 수 있다.

❗ type alias와 interface 차이점 1

   interface Student {
    name :string;
   }

   interface Teacher extends Student {
    age :number // Teacher Type => name :string (extends), age :number
   }

interface를 사용하면 속성을 복사해서 쓸 수 있다.

Student에서 지정한 타입을 그대로 상속받아 Teacher에서도 동일하게 쓸 수 있도록 하는것이다.

이렇게 정의를 해주면 Teacher에서는 name의 키값에 대한 value는 문자열만, age의 키값에 대한 value는 number이라는 타입만이 올 수 있는 정의를 해주는것이다.

 

type alias에서도 유사하게 사용할 수 있기는 하다.

   type StudentType = {name :string}
   type TeacherType = {age :number} & StudentType // 위의 interface와 기능은 동일

기능은 동일하지만 차이점이 있다.

인지하였는가?

바로. type alias는 타입을 복사해오는 것이 아니라 and 연산자와 동일하게 정의한 두 타입 모두 조건에 부합해야한다고 지정해둔것이다.

 

❗ type alias와 interface 차이점 2

두 번째 차이점에 대해 간단히 말하자면

"중복 선언(재정의)에 대한 가능 여부"이다.

 

type alias는 타입 정의에 대해서 엄격하지만 interface는 그렇지 않다.

 

그렇기 때문에 외부 라이브러리의 TS파일을 보게된다면 누군가가 해당 라이브러리를 사용했을 때 특정 부분에 대한 타입을 재정의 할 수 있게끔 하기위해 interface가 아주 많다고 한다.