Interface는 앵귤러 고유의 기능은 아니지만 앵귤러 애플리케이션을 만드는데 있어서 필수 불가결한 중요한 기능입니다.
잠시 interface에 대해 알아보고, 앵귤러 애플리케이션에 적용해 보겠습니다.
이번 포스트에선 아래의 내용을 다루고 있습니다.
- 타입
- 인터페이스란
- 인터페이스를 쓰는 두 가지 사용법
타입
TypeScript사용의 이점 중 하나는 강력한 타입(type)을 갖는 것 입니다.
모든 프로퍼티에는 타입이 있고 모든 메서드에는 반환 타입이 있으며, 모든 메서드 매개 변수 에는 타입이 있습니다.
타입은 더 나은 구문 검사 및 도구를 통해 오류를 최소화 하는데 도움을 줍니다.
그러나 경우에 따라 아래 movies배열과 같이 사전에 정의된 타입이 없는 프로퍼티 혹은 메서드가 있습니다.
이런 경우 movies배열을 any로 정의하여 타이핑의 이점을 무효화 합니다.
위와 같이 any를 쓰지않고 사용자 정의 유형을 지정하기 위해 인터페이스를 정의 할 수 있습니다.
인터페이스
인터페이스는 관련된 프로퍼티들과 메서드들의 집합을 식별하기 위한 사양(specification)입니다.
인터페이스를 쓰는 두 가지 사용법
1. 데이터타입으로 사용하기
인터페이스를 사용하면 특정 유형의 프로퍼티를 식별할 수 있습니다.
아래의 예와 같이 인터페이스를 정의한 후, 데이터의 유형으로 지정하여 코드를 더욱 강력하게 만들 수 있습니다. any를 사용하는 것 보다는 필요한 고유 데이터 타입에 대한 인터페이스를 만들어 정의 하는 것이 좋습니다.
2. 기능그룹 식별로 사용하기(기능을 구현하기 위한 패턴)
두 번째 방법은 기능 그룹(feature set)을 식별하는데이용하는 것입니다.
다시 말하면 특정 기능을 구현하는데 필요한 프로퍼티와 메서드를 선언하여 이용하는 것을 의미합니다.
아래 코드와 같이 오직 선언만 존재합니다.
컴포넌트에서 이 기능을활용하기 위해 implements키워드를 사용하여 인터페이스를 지정합니다.
그런 다음 인터페이스에 정의된 각 프로퍼티 및 메서드에 대한 코드를 작성 합니다.
특정 기능에 필요한 프로퍼티와 메서드를 자세히 설명하는 구현 패턴으로 생각하시면 됩니다.
인터페이스를 구현하는 개념은 프로그래밍을 처음 시작하는 분들에게는 다소 어렵게 느껴질 수 있습니다.
인터페이스는 향후 앵귤러 포스트에서도 계속 사용할 것 이니 보다 자연스럽게 익숙해 지세요.
이번 포스트에서는 인터페이스의 첫번째 이용 방법인 데이터 타입으로 사용에 중점을 두겠습니다.
인터페이스 데이터 타입으로 사용해 보기
영화 리스트 예제의 영화 데이터의 타입을 기억하고 계신가요?
any타입이었습니다.
이제 인터페이스가 나설때입니다. 우선 파일을 작성하겠습니다.
movieList컴포넌트가 있는 폴더에 movie.model.ts파일을 만들었습니다.
파일 이름의 "model"은 정해진 규칙은 아닙니다.
모델로서의 인터페이스를 나타내는 파일임을 알게 쉽게 하기 위해서 model를 붙여준 것 뿐입니다.
Movie모델의 인터페이스는 아래와 같습니다.
Interface키워드를 사용하여 인터페이스를 정의 하였습니다.
일부 이름 지정 규칙에 따라 인터페이스의 접두사로 i를 표시 하기도(Imovie와 같이) 하지만 타입스크립트 개발자는 i를 많이 생략하기도 합니다.
앞쪽에 있는 export키워드를 사용하여 인터페이스를 애플리케이션 어느 곳에서나 사용 할 수 있도록 하였습니다.
인터페이스의 본문은 프로퍼티 집합을 정의 합니다.
각 프로퍼티에는 프로퍼티명(예: movieId)과 데이터 타입( string)을 선언합니다.
이제 인터페이스를 만들었으니 사용해 보겠습니다.
movie라는 타입을 쓰기 위해서 movie를 import 하여야 합니다.
movies프로퍼티에 movie란 타입을 붙여 주었습니다.
하지만 잘 보면 movieId에 빨간 줄로 표시가 되어있는 걸 발견하실 수 있을 겁니다.
마우스 오버를 해보면 에러에 관한 메시지가 나옵니다.
에러의 내용은 "number는 string에 할당할 수 없다"입니다.
이런 에러가 나온 이유는 인터페이스에서 movieId의 타입을 string으로 선언했기 때문입니다.
이것이 타입스크립트의 장점입니다.
타입을 선언해 주는 것 만으로 코딩 중에 많은 에러를 사전에 알려줍니다.
이제 아래 코드처럼 interface의 movieId 타입을 number로 수정하였고 에러도 사라졌습니다.
여기까지 수고하셨습니다.
다음 포스트에서는 컴포넌트의 스타일에 대해 이야기하겠습니다.
'프로그래밍 > Angular' 카테고리의 다른 글
| 앵귤러 기초(Angular basic) 15.생명주기(lifecycle), hook (0) | 2022.01.25 |
|---|---|
| 앵귤러 기초(Angular basic) 14.컴포넌트 스타일 캡슐화 (0) | 2022.01.24 |
| 앵귤러 기초(Angular basic) 12.파이프(pipe) (0) | 2022.01.22 |
| 앵귤러 기초(Angular basic) 11.양방향 바인딩(Two-way Binding) (0) | 2022.01.21 |
| 앵귤러 기초(Angular basic) 10.이벤트 바인딩(event binding) (0) | 2022.01.20 |
댓글