이번 포스팅에서는 객체 내의 프로퍼티의 속성을 먼저 정의해준 후에 안에 들어가는 내용을 넣어주고 싶을 때 사용할 수 있는 TypeStript의 인터페이스 기능에 대해서 알아보겠습니다.
참고한 강좌 영상은 아래 첨부합니다 :)
목차
0. 기본 사용법
인터페이스는 인터페이스 내에 선언된 프로퍼티 혹은 메소드의 구현을 강제하여 일관성을 유지할 수 있게 해 주는 장치입니다. (기존에 다른 언어를 공부하셨다면 이미 인터페이스 혹은 이와 비슷한 기능을 보거나 사용해보셨을 수 있습니다!!)
사용법은 크게 어렵지 않습니다.
먼저 인터페이스를 선언합니다. 앞에 Interface 타입이라는 것을 명시하고, 일반적인 객체를 만들듯이 만들어주면 됩니다.
대신 인터페이스 안에 있는 프로퍼티에는 값이 아닌 타입이 들어가게 되는 것이죠.
인터페이스 선언이 끝났으면, 객체를 만들 때 그 객체의 타입을 우리가 만든 인터페이스의 이름으로 설정해주면 됩니다. 이렇게만 해도 우리가 User 타입의 객체를 만들 때 name, age가 특정 속성으로 만들어져야지만 정상적으로 동작하게 됩니다. (프로퍼티가 없으면 오류 발생!)
그런데 있어도 되고 없어도 되는 프로퍼티가 있을 수도 있습니다.
이런 경우에는 어떻게 할까요?
인터페이스 내에서 프로퍼티를 만들 때 프로퍼티의 이름 바로 뒤에 ?를 붙여주면 됩니다!
이렇게 만들면 프로퍼티가 없더라도 해당 인터페이스로 객체를 만들 수 있게 됩니다. (let이기 때문에 나중에 추가도 가능해지는 것이죠!
그렇다면 처음 생성할 때만 할당할 수 있고 나중에는 변경하지 못하게 만들 수는 없을까요?
이럴 때는 readonly 속성을 사용할 수 있습니다.
인터페이스 내에서 프로퍼티를 만들 때 프로퍼티의 이름 앞에 readonly를 붙이면 생성할 때를 제외하고는 그 프로퍼티의 내용을 수정할 수 없게 됩니다.
1. 고급 사용법
위 예시에서 학년별 성적을 추가하고 싶을 수 있습니다.
1학년 때 'A', 2학년 때 'B' 와 같이 말이죠.
물론 하나하나 ?를 이용해서 처리해줄 수 있습니다. (아직 3,4학년은 안다녔을 수도 있으니까!!)
하지만 조금 더 우아하게 처리해봅시다.
[key:key속성] : value속성 형태를 User 안에 넣어줍니다.
이렇게 만들면 key값에 number을 받고 value값으로 string을 받는 무언가를 프로퍼티로 받을 수 있게 됩니다.
이제 객체를 생성해보면, 정상적으로 숫자 : 문자열 형태의 데이터를 받을 수 있게 되었다는 사실을 알 수 있습니다!!
(여기서 grade 자리에는 아무 문자나 들어가도 상관이 없습니다!!)
근데 여기서 string자리에 올 수 있는 것은 A, B 뿐만이 아니라 다양한 문자열입니다.
이런 경우 범위가 너무 넓기 때문에 잘못된 문자열이 들어가서 사고가 발생할 수 있겠죠?
이런 상황을 방지하기 위해 쓸 수 있는 것이 문자열 리터럴 타입입니다.
type이라는 키워드를 앞에 붙여주고, Score이라는 변수를 하나 만들어줍니다.
그리고 그 안에는 'A' | 'B' | 'C' | 'F' 를 넣어줍니다.
이렇게 만들면 Score 타입으로 생성한 무언가는 A, B, C, F 4글자만 들어갈 수 있게 됩니다.
2. 인터페이스로 함수 만들기
인터페이스를 이용해서 객체 뿐만 아니라 함수도 타입을 미리 지정해둘 수 있습니다.
Add라는 인터페이스를 만들고, 그 안에 (매개변수) : 타입 형태의 프로퍼티를 만들어줍니다.
아래 예시에서는 number형태의 매개변수 2개를 받아서 동작하는 함수의 결과값이 number가 된다는 의미입니다.
만든 인터페이스를 이용해서 add라는 함수를 만들 때는 add 함수 뒤에 속성으로 Add를 붙여주면 됩니다. 그리고 원하는 형태로 함수를 선언해 주면 되는 것이죠.
function형태 뿐만 아니라 화살표함수 형태도 만들 수 있습니다.
사용법은 function 형태와 동일하기 때문에 보시면 바로 이해하실 수 있을 겁니다!!
3. 인터페이스로 클래스 만들기
인터페이스를 이용하면 객체, 함수 뿐만 아니라 클래스도 타입을 미리 지정해둘 수 있습니다.
일반적인 프로퍼티의 경우 객체와 동일한 방식입니다. 프로퍼티로 메서드도 넣는 경우 함수와 동일한 방식입니다.
이렇게 만들어준 인터페이스는 implements를 통해 사용할 수 있습니다.
클래스라면 생성자를 빼놓고 이야기할 수 없겠죠?
생성자가 들어가더라도 크게 차이는 없습니다.
다만 주의할 점이라면 인터페이스에서 선언한 프로퍼티들이 모두 들어갈 수 있도록 해야 한다는 것만 신경써 주시면 됩니다.
class 내부의 b를 console.log로 찍으면 내용이 잘 출력되고, 메서드인 start()를 사용해도 정상적으로 출력됩니다.
3.0. 인터페이스의 확장
이미 생성한 인터페이스를 확장할 수도 있습니다.
만약 Car는 Car인데 Benz의 속성을 미리 정의해둔 인터페이스를 만들고 싶을 수 있잖아요!!
이런 경우에는 기존 인터페이스를 extends를 이용해서 불러올 수 있습니다.
이렇게 만들고 나서 특정 클래스에서 Benz 인터페이스를 사용하는 경우 기존 Car의 프로퍼티인 color, wheels, start() 뿐만 아니라 새로운 Benz의 프로퍼티인 door, stop()까지 모두 정의를 해야 오류가 사라지게 됩니다.
추가로 콤마를 이용해서 여러 개의 인터페이스를 받아서 확장할 수도 있습니다.
이렇게 만들게 되면 ToyCar 인터페이스로 만든 클래스는 color, wheels, start(), name, price 프로퍼티를 전부 가져야 되는 것이죠!!
최근댓글