본문 바로가기
개발 언어/TypeScript

05 TypeScript - interface

by 우주다람쥐 2018. 4. 6.
반응형

5. interface


TypeScript에서는 interface 기능을 제공한다.


interface는 어떤 객체를 선언할 때 해당 객체가 인터페이스의 메소드들을 강제하기 위해 사용한다.

이 말만 보면 이해하기가 좀 어렵겠지만 아래 예시들을 보면서 이해한다면 좀 더 나을 것이다.


기회가 된다면 자바의 interface 내용을 공부해본다면 좀 더 이해가 쉬울 것이다.


p.s)

interface는 클래스 개념을 안다면 좀 더 쉽게 이해할 수 있다.

다음 글에서 클래스에 대한 내용을 다룰 것 이다.

자바를 공부했다면 알고 있겠지만 자바에서 interface는 class에 implements 해서 많이 사용한다.

그 내용은 클래스에서 다루겠다.


(1) 기본 사용법

사용 방법은 다음과 같다.



가장 기본적으로 JSON 형태의 객체를 생성할 때 변수의 type으로 지정해서 사용한다.


내부적으로 함수를 method 형태로 만들어 사용할 수도 있다.



내부 변수를 선언할 때 함수에서 처럼 선택 인수로 사용할 수도 있다.




(2) type assertion


지금까지의 예제를 보면 interface는 JSON 객체를 사용할 때 사용한다.

그런데 변수 타입으로 지정하는 방식은 초기 값을 지정해주지 않으면 이후에 사용이 불가능하다.


초기값을 지정해주지 않고 사용하려면 type assertion 형태로 사용해야 한다.

이렇게 사용하는 건 객체 안의 key 값을 통일 시켜주기 위함이 크다.



변수 s와 t와 같이 key 값을 마음대로 주게 되면 나중에 데이터를 처리할 때 문제가 될 수 있다.

특히 여러 명이 함께 코드를 작성하는 경우 type assertion을 이용해 초기화 시켜주는게 좋다.


여기서 궁금증이 생길 수도 있는데, 변수 타입 설정 방법으로는 초기화가 안 될까 하는 궁금증이다.

그래서 한번 코드를 작성해 봤다.



해당 코드로 실행해보면 다음과 같은 에러가 발생한다.

변수 a의 경우 타입으로 interface를 지정해주고, 초기값을 지정해주지 않으니 name이라는 key에 대한 정보가 없다.

그러나 변수 b의 경우 type assertion으로 초기화를 시켜줬기 때문에 name이라는 key가 존재(value 값은 없지만)하기 때문에 이후 값을 넣어줄 수 있다.



(3) union


interface에서도 변수 타입을 지정할 때 union을 사용할 수 있다.

아래와 같이 사용하면 된다.



(4) extends


interface는 다른 interface를 extends해서 사용할 수 있다.



(5) readonly


interface 안에서 특정 인자만 읽기 전용으로 지정할 수 있다.

아래의 예시에서 readonly로 지정한 인자를 변경하려고 하면 에러가 발생하는 걸 볼 수 있다.



반응형

'개발 언어 > TypeScript' 카테고리의 다른 글

07 TypeScript - generic  (0) 2018.04.09
06 TypeScript - Class  (0) 2018.04.06
04 TypeScript - union  (0) 2018.04.06
03 TypeScript - function  (0) 2018.04.05
02 TypeScript - 특징 및 타입  (0) 2018.04.05

댓글