✍ Prerequisite of Interface
우선, 인터페이스를 다루기 이전에 우리가 type을 선언하는 방식과 이유에 대해서 알 필요가 있다.
type User = {
fistName : string,
lastName : string
}
const oh : User = {
firstName : "HYUNSANG",
lastName : "OH"
}위와 같이 type을 선언하면 앞으로 사용하게 될 객체의 데이터 타입의 모양을 어느정도 지정해 줄 수 있으며, 복수의 객체 또는 데이터 타입에 적용할 수 있으며, ALIAS 설정을 해줘서 변화 무쌍하게 타입을 지정해 줄 수 있기 때문에 프로젝트 진행 시 타입을 지정해주고 사용해주는 것이 편하다.
그 외에도 type을 활용하여 데이터 타입만 지정해주는 것이 아닌 특정 값도 다음과 같이 지정해 줄 수 있다.
type Category = "Korean" | "Japanese" | "Chinese"
type Food = {
name : string,
ingredients : Array<string>,
category : Category
}
const kimchi : Food = {
name : "KimChi",
ingredients : ["Garlic", "Onion", "Cabbage", "Chili Powder"]
category : "Korean"
}위 예제에서 type Category를 3가지 스트링 데이터 타입으로만 지정했기에 만약 category에 위에 명시된 것 이외의 데이터를 넣게 되면 타입스크립트는 오류를 발생 시킨다.
위에서 언급한 것처럼 타입은 이렇게 변화무쌍하게 사용이 가능한데....이 방법외에도 타입스크립트에서는 인터페이스라는 개념을 활용해서 객체의 모양을 지정해 줄 수 있다.
✍ Interface
우선 인터페이스가 무엇인지 정의부터 알고보자
타입스크립트 내에서 인터페이스란 상호간의 약속 혹은 규칙을 정의 한 것으로
1. 객체의 스펙
2. 함수의 파라미터 및 스펙
3. 배열 및 객체 접근 방식
4. 클래스
와 같은 곳에 사용이 된다.
사실 인터페이스 사용 방식은 기존에 쓰고 있었던 type 방식과 크게 차이점이 없기에 상기 예제를 그대로 가져와 인터페이스 방식으로 접근하자면 다음과 같다.
interface User {
fistName : string,
lastName : string
}
const oh : User = {
firstName : "HYUNSANG",
lastName : "OH"
}한 가지 큰 차이(의미적)가 있다면 type은 변화무쌍하며 다양한 데이터 타입에 적용이 가능하지만 interface는 객체의 모양을 지정해주는 역할이 전부이다.
✍ Interface VS Type
📝 확장법
Interface와 Type 둘 모두 본래 지정되었던 틀에서 규칙을 하나 이상을 추가하는 것으로 확장이 가능한데 방법이 사뭇 다르다. 예제를 통해서 간단히 알아보자
✏️ Interface의 확장법
interface User {
fistName : string,
lastName : string
}
interface Administrator extends User {
adminNo : number
}
const master : Administrator = {
firstName : "Super",
lastName : "Amazing",
adminNO : 1
}인터페이스의의 확장법은 Class와 비슷하다.
✏️ Type의 확장법
type User = {
fistName : string,
lastName : string
}
type Administrator = User & {
adminNo : number
}
const master : Administrator = {
firstName : "Super",
lastName : "Amazing",
adminNO : 1
}type은 &(and)연산자를 활용해서 확장한다.
사실 두 개의 큰 차이는 없지만 개인적으로 interface를 활용한 확장법이 좀 더 깔끔해 보인다.
📝 Accumulate 축적
한 가지, type에서는 할 수 없지만 interface에서는 가능한 것이 있다.
바로! 축적!!!
interface에서는 다음과 같이 이미 선언된 interface 식별자를 다시 가져와서 추가하는 것(축적)이 가능하다.
interface User {
fistName : string,
lastName : string
}
interface User {
userNo : number
}type으로는 이것이 작동하지 않는다.
결과적으로 보자면 interface와 type은 큰 차이가 없어 보인다. 물론 리서치를 조금 해보면 활용법의 차이가 있기 때문에 객체를 선언할 때 interface를 쓰는 것이 조금 더 편하다고 하지만 사실..협업을 하다보면 둘 중 하나의 개념으로 정리해서 쓰게 되기 때문에 그 때 정해서 사용해보도록 하자.
