Typescript - interface, type alias

interface는 implement를 통해 class에 부여된다. interface는 getArea 라는 함수를 갖고 있고, class Circle 또는 Rectangle은 그 요소들을 포함해야하니, 안에 getArea라는 함수를 꼭 포함해주어야 한다.

 

이것을 어떤식으로 사용할 수 있을까? interface를 통해서 class들을 배열로 넣어줄 수 있다. 예를 들어, circle과 rectangle이라는 변수에 클래스 선언을 각각 해주자.

shapes라는 변수는 Shape라는 interface를 지닌 클래스 객체들을 담는 리스트이다. 따라서 안에 circle과 rectangle이 들어가는 것은 허용되지만,

이런식으로 다른 타입의 값을 넣어주면 에러가 난다. 그러면 이제 이 shape 변수를 통해 무얼 할수 있느냐면,

 

이런식으로 사용이 가능하다. 참고로 getArea 함수는 자동완성으로 완료가 되었다. 타입스크립트가 얼마나 IDE 경험을 향상 시켜주는지 알 수 있는 곳이다. 또한, 타입스크립트에서는 더 쉽게 클래스 선언이 가능하다. 각 변수를 지정해주고 그것에 대한 constructor에 this.thing을 모두 넣어주는 것이 아닌,

이런식으로 constructor에 public 또는 private으로 선언을 해주면 번거로운 작업들을 줄일 수 있다. java와 비슷한데, public은 예를 들어 circle.radius를 통해서 radius를 불러올 수 있지만 (전역적으로 사용 가능), private은 오직 class 안에서만 쓰이게 된다 (따라서 값을 외부에서 불러올수 없다). 물론, Javascript는 private public을 지원하지 않기 때문에 사실상 Typescript 안에서만 유의미한 속성이라고 볼 수 있다.

 

또는 interface는 위와 같이도 사용 가능하다. age뒤에 붙어있는 물음표는 있어도 되고 없어도 된다는 뜻의 속성이다. 따라서 위의 person1에는 age가 들어갔고, person2에는 age가 들어가지 않았지만, 둘 다 에러가 나지 않았다. 그러나 선언해 주지 않은 속성을 넣으려 하면,

이런 식으로 에러가 뜬다.

 

인터페이스 또한 상속이 가능하다.

Developer 라는 interface는 Person을 상속받았기 때문에 name, age, skills 라는 속성을 갖는 interface가 된다. 따라서, 새로운 Developer 객체를 만들어 줄때는 name, (age?), skills를 모두 입력해 주어야 에러가 나지 않는다.

 

Type alias도 비슷하게 작동을 하도록 할 수 있다. 아래 코드를 보자.

 Person이라는 새로운 타입을 만들어 주었고, Developer라는 타입에는 Person이라는 타입의 속성을 상속시켜 준 뒤 skills라는 새로운 속성을 넣어주었다. 위와 살짝 다른 형식의 선언이지만, 실행은 완전히 똑같이 된다. 보면 person이라는 변수에 들어가는 값들이나 어떠한 것들도 바뀌지 않았다. interface 또는 type alias의 선언 방식만 바뀌었다.

 

 

이 쯤 되면 의문이 들 것이다. 그래서 interface랑 class의 결정적인 차이점이 뭔데? 음, 나도 잘은 모르겠지만, 어느 블로그에서 읽은 것에 따르면 class (추상 class)는 프로그램의 전체구조를 짤 때 필요하다고 한다. 그리고 interface는 프로그래머 간의 협업 개발을 할 때 필요하다고 한다. 각 객체마다 어떤 것들이 필수적인지 interface로 지정할 수 있는 것이고, 추상 class는 실제로 큰 틀의 전체구조를 짜면서 필요한 추상 class 들로써 사용된다는 것이다.