비슷하지만 동일하지 않은 interface vs type
타입스크립트에서 타입을 선언하기 위해서는 interface 또는 type 키워드를 사용합니다.
각각의 선언 방식은 다음과 같으며 =의 유무만 다릅니다.
// interface
interface Team{
name : string
}
// type
type Team = {
name : string
}
그리고 타입의 확장 방법은 다음과 같습니다.
// interface
interface City extends Team {
city : string
}
// type
type City = Team & {
city : string
}
interface와 type의 가장 큰 차이점은 바로 선언적 확장(Declaration Merging) 기능인데요.
선언적 확장이란 이미 선언된 타입 선언에 필드를 추가하는 것입니다.
하나는 가능하고 하나는 가능하지 않은데 interface만 가능한 것이 특징입니다.
사용 방법은 다음과 같습니다.
interface Team {
name : string
}
interface Team {
manager : string
}
위와 같은 방법으로 이미 선언된 interface에 다시 필드를 선언할 수 있습니다.
하지만 type을 다음과 같은 방법으로 사용하면 에러가 발생합니다.
type Team = {
name : string
}
// Error 발생 -> 'Duplicate identifier 'Team'
type Team = {
manager : string
}
추가로 type은 원시형(number, string 등) 데이터를 다른 이름으로 지정해서 사용할 수 있지만 interface는 불가능합니다.
자세한 내용은 다음 코드와 같습니다.
//type으로 원시형 데이터의 이름을 지정
type NameDataType = string;
const printName = (name : NameDataType ) => {
console.log(name);
}
//interface는 불가
interface NameType extends string {
}
차이점을 신경써도 되지 않을 상황이라면 취향에 따라 선택하면 되지만 기본적으로는 interface를 쓰면 큰 문제가 없다고 합니다.
참고 : typescript 공식 문서
