타입스크립트 | 인터페이스 이해하기(feat 덕 타이핑)

인터페이스란 무엇일까요? 인터페이스는 TypeScript에서 중요한 역할을 합니다. TypeScript 컴파일러는 타입을 통해 프로그램을 검사하고 올바르게 사용하고 있는지 확인합니다. 그리고 인터페이스를 이용하여 타입을 정의할 수 있습니다. 인터페이스가 무엇인지와 인터페이스가 필요한 이유를 알아보도록 하겠습니다.

---

1. 인터페이스 란?

인터페이스란 무엇일까요? 인터페이스는 일종의 계약과 같습니다. 타입을 정의하는 계약입니다. 컴파일러는 타입 확인을 통해 계약을 시행합니다.  예를 들어 일부 코드가 타입에 정의되지 않은 속성이나 메서드를 참조할 경우 발생하는 에러를 생각해 볼 수 있습니다. 즉 인터페이스는 타입을 사용할 수 있는 방법과 사용할 수 없는 방법을 정의하는 계약입니다.

인터페이스는 사용자 지정 타입을 정의하지만, JavaScript는 사용자 지정 타입을 지원하지 않으므로 인터페이스는 JavaScript의 어떤 것으로도 컴파일되지 않습니다. 컴파일러에서 타입  확인을 위해 사용할 뿐입니다.

인터페이스는 물체의 모양을 지정한다고 합니다. 속성 및 메서드 정의 모음이지만 구현 세부 정보를 제공하지 않습니다. 구현은 인터페이스를 구현하는 클래스 또는 객체에 의해 제공됩니다. TypeScript 인터페이스는 객체의 모양에 초점을 맞추기 때문에 덕 타이핑(Duck Typing)의 한 형태입니다. 즉 객체가 예상된 타입의 모양을 가지고 있는 한, 명시적으로 그렇게 선언되지 않았더라도 해당 유형의 객체인 것처럼 사용할 수 있습니다. TypeScript의 인터페이스가 어떻게 작동하는지 완전히 파악하기 위해서는 덕 타이핑의 개념을 이해하는 것이 매우 중요합니다.

 

2. 덕 타이핑 (Duck Typing)

덕 타이핑의 기본 아이디어는 이른바 오리 실험을 기반으로 하고 있습니다. "오리처럼 걷고, 오리처럼 헤엄치고, 오리처럼 꽥꽥거리는 새를 보면 그 새를 오리라고 부른다" 가장 유사한 것으로 인식되고 취급되기 위해 인식표가 필요하지 않다는 아이디어입니다. 이 아이디어는 알려진 타입의 모양을 가진 객체가 명시적으로 해당 객체로 선언되지 않았더라도 해당 타입으로 처리하도록 허용하는 타입 시스템의 기법으로 널리 쓰이고 있습니다. 실제 오리 타입의 예를 살펴보겠습니다.

위 예제에서 Duck이라는 인터페이스를 만들었습니다. 인터페이스는 모든 오리가 수행할 수 있는 함수를 지정하고 있습니다. 인터페이스에서 정의한 오리는 걷고, 수영하고, 꽥 할 수 있습니다.

maybeDuck이라는 새로운 변수를 선언했습니다. 하는 행동을 보니 오리인 것 같은데 타입을 명시하지는 않았습니다. 그러나 이것은 walk, swim, quack이라는 이름의 메서드를 가진 개체이며, 이러한 메서드의 시그니처는 Duck 인터페이스의 시그니처와 정확히 일치합니다. 다음으로 Duck을 매개변수로 하는 함수를 정의하겠습니다.

mabeDuck은 Duck 인터페이스에 필요한 모든 메서드를 가지고 있기 때문에 Duck으로 선언하지 않았음에도 불구하고 swimWater 함수에 전달할 수 있습니다. maybeDuck은 오리처럼 걷고, 오리처럼 헤엄치고, 오리처럼 꽥꽥거려서 오리라고 부르고, 오리 타입이 이용되는 곳에 사용할 수 있습니다. 이러한 경우가 말 그대로 Duck Typing입니다.

다시 말해 덕 타이핑은 객체가 어떤 타입에 해당하는 프로퍼티와 메서드를 지니면 해당 타입으로 간주하는 것을 의미합니다. 타입 스크립트에서도 덕 타이핑의 특성을 가지고 있습니다.

 

3. 인터페이스 정의하기

이제 인터페이스를 정의하는 구문을 살펴보겠습니다.

Movie라는 인터페이스를 정의하였습니다. 인터페이스의 이름은 interface 키워드 다음에 지정합니다.  인터페이스의 정의는 중괄호 안에 배치됩니다. 프로퍼티 이름을 지정한 다음 콜론 뒤에 해당 유형을 지정하여 속성을 지정합니다. 예에서는 id, title, director, runningTime이라는 프로퍼티를 지정했습니다. 이 모든 프로퍼티는 이 인터페이스를 구현하는 객체에 필요합니다. 그러나 선택적 프로퍼티를 지정할 수 있습니다. 구문은 함수의 선택적 매개 변수에 사용되는 구문과 동일합니다. 속성 이름 바로 뒤에 물음표를 추가하면 됩니다.

runningtime 프로퍼티 명 뒤에 물음표를 추가하여 선택적 프로퍼티로 바꿔주었습니다. 메서드에 이름과 서명을 지정하여 인터페이스에 메서드를 지정할 수 있습니다.  Movie 인터페이스에는 number 타입 변수를  매개 변수를 사용하고 void를 반환하는 voteRate라는 메서드가 있습니다.

 

 

여기까지 읽어 주셔서 감사합니다.