본문으로 건너뛰기

많이 쓰는 것은 잘 아는 것일까..? (interface)

· 약 4분

아마 제일 많이 사용할 것 같은 타입, interface. 이왕 사용할 거면 공식 문서 한번은 훌어보자.

interface 이미지

타입스크립트를 사용하면서 가장 많이 사용했던 타입 중 하나, interface의 차례가 왔다. 가장 많이 사용했기때문에 사용하는데 불편하지는 않지만, 과연 내가 잘 사용하고 잘 아는 것일까..?

역시 chatGTP.. 항상 고마워..

그렇다고 한다.. 그럼 다시 처음으로 돌아가 학습하고 연습하는 시간을 가져보자..!

interface

인터페이스는 타입에 이름을 지어주는 방법 중 하나다.

주로 우리는 타입을 생성할 때, Type 또는 interface로 타입을 생성해주곤 한다.

Type과 다르게 interface는 확장이 용이하고 중복된 이름으로 선언했을 때, 선언이 합쳐진다는 점이 다르다고 할 수 있다.

extend

확장이 필요한 경우는 무엇일까?

유저정보 타입들

여기 유저정보에 관한 타입들이 있다.

interface UserInfo {
name: string
id: string
email: string
}

interface BlockUserInfo {
name: string
id: string
email: string
isBlock: boolean
}

interface YouthUserInfo {
name: string
id: string
email: string
isYouth: boolean
}

보면 일반유저(UserInfo), 차단유저(BlockUserInfo), 청소년유저(YouthUserInfo)는 기본적으로 name, id, email 값을 기본적으로 사용하고 있는 걸 볼 수 있다.

우리는 코드를 작성할 때, 주로 사용하는 값이나 여러 곳에 쓰이는 함수를 묶어서 모듈화하곤 하는데, 지금이 그 상황이랑 비슷하다고 생각하면 될 것 같다.

name, id, email를 개별적으로 사용하지 말고 UserInfo를 기반으로 차단유저, 청소년유저로 isBlock, isYouth를 추가해보자.

유저정보를 확장해보자.

interface UserInfo {
name: string
id: string
email: string
}

interface BlockUserInfo extends UserInfo {
isBlock: boolean
}

interface YouthUserInfo extends UserInfo {
isYouth: boolean
}

extends를 사용해서 타입을 생성하니까 코드도 짧아졌고, 공통으로 사용되는 유저정보에 어떤 값이 변경된다고 해도 차단유저정보, 청소년유저정보 타입을 각각 변경하지 않고 공통 유저정보타입만 수정해주면 공통유저정보를 확장한 타입이 다 변경된다.

즉 유지보수가 쉬워진다.

타입 별칭과의 다른점

가장 큰 차이점은 interface는 객체타입만 선언할 수 있다.

type UserInfo = string

interface UserInfo = string // 불가

Type Aliases(타입 별칭)은 모든 타입에 대해 선언이 가능하지만, interface는 객체 타입만 선언할 수 있다.

interface는 선언 확장이 가능하지만 Type Aliases은 선언 확장이 불가하다.

타입을 작성하는데 너무 많이 쓰이는 타입이나 겹치는 부분이 있다면 나중에 유지보수를 위해서라도 interface를 확장해서 사용해보는 연습을 해보자.


예시 코드 보러가기