[TYPESCRIPT] interface

Interface

Ts에서 가장 핵심적인 원칙 중 하나는 타입의 형태에 초점을 둔 타입 검사 라는 것이다. interface 는 이런 타입들의 이름을 짓는 역할 및 코드의 내/외부에서 행동을 정의 하는 강력한 방법이다.

 

interface 는 각 속성에 타입을 정의한 후 다른 요소의 타입으로 정의 하여 사용 할 수 있다.

Optional properties

 : Ts의 인터페이스를 사용 할때 정의된 요소를 모두 인자로 사용해야 한다. 하지만, 위의 예시 처럼 요소의 뒤에 ?를 사용하게 되면
선택적으로 사용 할 수 있게 된다.

선택적 속성의 이점은 인터페이스에 속하지 않는 프로퍼티의 사용을 방지하면서, 사용 가능한 속성을 기술하는 것입니다.

Excess property checks

 :  선택적 속성을 사용하여 인자값을 넣을 때, 간혹 다른 인자가 필요 할 수 있다. 하지만, 인터페이스에 정의된 요소를 사용하게 되면 사용한 인자에 대한 초과 속성검사를 하게 되는데 이때 요소와 인자가 서로 다르다고 판단되면 오류가 발생 한다.

그래서 다른 인자를 사용해야 할 때는 위의 예시 처럼 세 가지 방법 중 하나를 사용해야 한다.

예시 1 : alias 를 사용 하여 확정 타입을 사용하는 방법

예시 2 : 인터페이스 선언 시 새로운 속성을 사용 할 수 있도록 추가 속성을 정의 해주는 방법

예시 3 : 새로운 속성값을 다른 변수에 선언한 뒤 재사용 하는 방법

예시 1,2 번은 인터페이스 속성을 확정하거나 임의로 만들어 주는 방식이지만 예시 3은 변수로 선언된 값을 재 할당 함으로써
초과 속성 검사를 피하는 방법이다. 

 

Readonly

 : 속성에 readonly 속성을 사용하게 되면 인터페이스를 선언 할 때 요소를 초기화 할 수 있고, 외부에서 할용 할때는 아래 예시 처럼 재 할당 시 값을 변경 할 수 없다.

Function type

 : 인터페이스에는 아래 예시 1 처럼 함수의 인자값과 같이 요소를 선언 할 수 있다. 

또한, 예시 2 처럼 할당 할 때 인자값이 꼭 같이 않아도 인터페이스에 정의된 순서대로 할당 되기 때문에 임의로 정해서 사용 해도 된다.

예시 3 처럼 인자의 type를 생략해도 정상적으로 사용이 가능 하지만, 함수의 return 값이 인터페이스에서 선언한 요소의 type 와 일치하지 않으면 error가 된다. 예시 1처럼 boolean 값으로 설정 했다면 함수의 return 값도 역시 boolean 값이 나와야 한다.

 

indexable types

 : 배열 or 객체의 index 기능을 인터페이스에 정의 할 수 있다.( index 사용 예시 : arr[property], obj[property], obj.property)

예시 1 처럼 index를 숫자로 정의 하고 그 인덱스의 값은 문자열(index의 하위 타입) 이라고 정의 하여 사용 할 수 있다.

예시 2에서 index요소를 선언하고 그 하위타입이 cow의 타입과 달라서 오류가 나는 것을 확인 할 수 있다. 오류 값을 수정하려면 
cow의 타입을 string 으로 변경 또는 예시 3처럼 하위타입을 추가해 주어야 한다.

예시 4는 인덱스를 사용하여 값을 확인 할 수 있지만, 재 할당은 할 수 없도록 인터페이스 선언 시 설정해주는 방법이다.

 

class type

Implements an interface

 : class 에서 메소드를 정의 해서 사용 하는 것 처럼 인터페이스에서도 정의 할 수 있다. 하지만, 인터페이스에서 정의된 요소를 class 에서 상송 받기 위해서는 implements 를 사용하여 인터페이스의 내용을 가져와서 over riding(재정의) 해주어 한다.

extends VS implements

여기서 중요한 문제가 있다. 보통 상속이라고 한다면 extends 를 사용하는데 implements 역시 상속이라고 할 수 있다.

 

extends 와 implements의 차이점
extends : 부모와 자식의 상속관계를 만들어 부모에게 속한 인스턴스와 메소드를 모두 사용 할 수 있다.
implements : 동등한 관계에서(같은 레벨 단) 구현 한다는 의미를 가지기 때문에 다시 over riding을 해줘야 하는 것이다.

(extends : 확장 / implements : 구현) 단어의 뜻만 봐도 쉽게 구분 할 수 있다.

위 예시를 요약해 본다면 다음과 같다.

1. class가 class를 상속받을 땐 extends를 사용
2. interface가 interface를 상속 받을 땐 extends를 사용
3. class가 interface를 사용할 땐 implements를 사용
4. interface가 class를 사용할 땐 implements를 사용 할 수 없다.

참고 자료(stackoverflow) : bit.ly/3nGsZb6

What's the difference between 'extends' and 'implements' in TypeScript

이상으로 인터페이스에 대해서 알아봤다. 다음 포스팅은 class를 공부해서 포스팅 할 수 있도록 하겠다.