타입스크립트 | 인터페이스 확장 interface extends

인터페이스 확장 하기

인터페이스는 다른 인터페이스에서 확장(extends)되고 복합 타입의 모든 프로퍼티와 메서드를 포함하는 새 타입을 만들 수 있습니다. 간단한 예를 살펴보겠습니다.

위에서 movieNumber라는 프로퍼티를 하나 가지는 MovieResource라는 인터페이스를 정의했습니다.

그리고 title 프로퍼티를 가지는 Movie라는 두 번째 인터페이스를 정의하였습니다.

마지막으로 MovieResource와 Movie를 확장하는 세 번째 인터페이스를 정의하였습니다. extendsMovie 인터페이스는 이전 인터페이스 MovieResource, Movie에 정의된 모든 프로퍼티와 runningTime이라는 새 프로퍼티를 가지게 됩니다. 인터페이스를 확장하기 위해서 인터페이스 이름 뒤에 extends라는 키워드를 사용합니다.

새 변수 refMovie를 선언하고 extendsMovie 타입으로 지정하면 이는 extendsMovie에서 명시적으로 선언된 movieNumber와 title, runningTime 프로퍼티를 모두 갖게 됩니다.

---

인터페이스를 하나 더 연습해 보도록 하겠습니다.

interface.ts파일에서 Bird라는 새 인터페이스를 생성하겠습니다.

1. interface.ts파일에서 Person이라는 새 인터페이스를 생성하였습니다. name과 address 두가지 프로퍼티를 지정하였습니다. 둘 다 문자열 타입입니다.
2.  다음으로 Person 인터페이스를 확장하는 Actor인터페이스를 생성하였습니다. 인터페이스를 확장하기 위해서 인터페이스에 extends 키워드를 추가하기만 하면 됩니다. 이 예제에서는 하나만 확장하고 있습니다. Person에 대한 확장 인터페이스 인 Actor는 filmography 프로퍼티 하나를 가지고 있습니다.
3.  또 Person을 확장하는 또 다른 인터페이스를 만들고 있습니다. 인터페이스 이름을 Director로 지정 하였고 agency 문자열 속성과 makeMovie라는 메서드를 추가하였습니다. makeMovie 메서드는 movie를 문자열로 사용하고 void를 반환하는 타입입니다.
4. 새로 만든 인터페이스를 사용하기 위해서 모듈에서 export 해야 합니다.

이제 다른 파일인 index.ts파일에서 인터페이스 모듈을 import한 후, Actor와 Director 인터페이스에는 실제로 고유한 프로퍼티와 Person인터페이스에서 상속된 속성이 있는지 확인해 보겠습니다.

favoriteActor라는 새 변수를 선언하고 Actor타입으로 선언하였습니다. 그런 다음 객체 리터럴을 설정하게 됩니다. 비주얼 스튜디오 코드에서 Ctrl과 스페이스바를 함께 누르면 Actor 타입의 객체에 추가할 수 있는 프로퍼티 목록이 표시됩니다. 프로퍼티를 살펴보면 Person에서 address 속성을 가져오는 걸 확인할 수 있습니다. 화면은 없지만 name도 마찬가지로 Person에서 가져오는 속성입니다.

그리고 Actor에 정의된 대로 filmography 프로퍼티를 가져오고 있습니다.

 

이번엔 Director 타입을 살펴보겠습니다. Director 타입의 favoriteDirector 변수를 선언하였습니다.

마찬가지로 Ctrl + space를 누르면 사용 가능한 네가지 속성이 표시됩니다. address와 name는 Person으로부터 가지오는 프로퍼티입니다. 그리고 agency와 makeMovie는 Director로부터 가져오는 프로퍼티임을 확인할 수 있습니다.

---

이것으로 인터페이스의 확장에 대해 마칩니다. 여기까지 읽어 주셔서 감사합니다.