인터페이스란?
타입스크립트에서 인터페이스는 일반적으로 타입체크에 사용되며 상호 간에 정의한 약속 혹은 규칙을 의미한다!
어떤 변수의 타입으로 인터페이스를 선언한다면, 그 변수는 인터페이스가 가지고 있는 속성을 반드시 가지고 있어야 한다!
간단한 예시를 보자.
-
User인터페이스를 정의
-
변수 ted의 타입으로 User 인터페이스를 선언
-
변수 ted는 User 인터페이스를 준수하여야 함.
인터페이스는 보통 다음과 같은 범주에서 사용한다.
- 객체의 스펙(속성과 속성의 타입)
- 함수의 파라미터
- 함수의 스펙(파라미터, 반환 타입 등)
- 배열과 객체를 접근하는 방식
- 클래스
인터페이스 활용 - 변수
객체의 스펙을 정의하는데 주로 많이 활용된다.
+
인터페이스를 사용하여 타입을 선언했을 때 인터페이스에 정의된 형식은 반드시 지켜줘야한다.
위 코드는 에러를 발생시키지 않는다.
name 과 age 속성이 포함되어있기 때문이다.
인터페이스에 정의된 속성만 포함시킨다면 인터페이스에 정의하지않은 속성값을 추가로 넣어도 문제를 발생시키지 않는다.
위 코드는 빨간줄을 띄우게 될 것이다.
인터페이스를 선언했지만 인터페이스의 형식을 지키기 못했기 때문이다.
인터페이스 활용 - 함수
함수에는 어떻게 활용될까?
1. 매개변수
요런 함수가 있다.
인터페이스를 이용하면 받을 매개변수의 정보를 정의할 수 있다!
매개변수 movie 는 인터페이스의 형식을 따르는 값들만 받는다.
또, 이제 매개변수의 정보가 있기때문에 getMovieInfo 함수 내부에서 movie 만 타이핑해도
title, desc, rating 등의 속성들에 대한 자동완성도 지원이 될 것이다!
2. 구조
함수의 구조를 인터페이스를 이용해서 정의 할 수 있다.
이렇게 함수의 구조를 잡을때도 활용이 가능하다!
인터페이스 내부에 함수의 매개변수 타입과 반환 타입이 정의가 되어있다!
와우!
인터페이스 활용 - 인덱싱
인덱싱에도 활용할 수 있다.
배열에 접근할 때 [0] 이런식으로 접근하기 때문에 index 부분은 number 타입으로 선언, 각 요소들의 타입은 string
=> 문자열 배열
arr[0] = 10; // error; * number 형식은 string 형식에 할당할 수 없습니다.인퍼테이스 딕셔너리 패턴
key : 문자열
value : RegExp 타입
인터페이스 정의
obj 객체에 StringRegexDictionary 인터페이스 적용
obj 객체의 value 는 RegExp 타입만 허용
인터페이스의 상속
Person 인터페이스와 Developer 인터페이스가 있다.
두 인터페이스는 현재name 과 age 가 중복된다.
이럴 때 상속을 활용할 수 있다.
위에 작성된 코드를 다음과 같이 쓸 수 있다.
그리고 상속을 받은 인터페이스를 변수의 타입으로 선언할 때 상속을 받아서 사용했기 때문에
상속 받은 타입들도 모두 변수의 속성에 정의해야한다.
예시 :
🚨 에러 👇👇👇
✅ 정상 동작 👇👇👇
참고
