이 글을 쓰게 된 이유
TS를 공부하며 type키워드와 interface키워드의 차이점이 무엇인지 알기가 어렵고 왜 interface를 더 선호하는지 알기가 어려웠다.
때문에 type키워드와 interface키워드가 무엇이 다르며 왜 interface를 더 선호하는지 정리하기 위해 해당 글을 남긴다.
type vs interface
우선 type키워드는 타입 별칭이라고 불린다.
만약 Person이라는 타입을 정의하고 싶다고 가정하자.
type
type Person = {
name: string;
age: number;
}
const me: Person = { name: 'son', age: 27 };interface
interface Person {
name: string;
age: number;
}
const me: Person = { name: 'son', age: 27 };이렇게 type과 interface를 놓고보면 별반 차이가 없어보인다.
다만 type키워드는 타입 별칭이라는 용어와 걸맞게 me에 마우스를 hover하면 해당 타입별칭과 별칭에 할당되어있는 구조 전체를 모두 보여준다.
하지만 interface는 interface명만 보여준다.
사실 여기까지만 봤을 때는 별칭과 구조를 모두 보여주는 type이 더 훌륭하지 않은가?라고 생각했다.
하지만 이것은 interface의 단점이 될 수 없다.
윈도우의 경우 ctrl, 맥의 경우 cmd키를 누르고 마우스를 hover하면 interface 역시 구조를 모두 보여준다.
만약 타입을 확장하지 않고 type키워드와 interface를 사용한다면 차이는 이걸로 끝이다.
그렇다면 왜 interface를 더 선호할까?
interface를 선호하는 이유
생각해보자, 우리는 프로그램을 만들 때 여러가지 신경써야할게 많겠지만 단연 확장성있는 프로그램을 만들어야한다.
왜냐하면 프로그램은 지속적으로 업데이트가 되어야하는데 확장성을 염두해두지 않으면 프로그램을 업데이트할 때 극단적으로는 로직을 다시 짜야할수도 있기 때문에 확장성은 중요한 부분이다.
이런 관점에서 interface와 type의 차이가 극명해지는데
간단하게 말하면 interface는 확장이 가능하고 type은 확장이 불가능하다.
아래의 코드를 보자
exam.type.ts
// 내보낼 타입 자체는 `interface`, `type` 둘 중 어느 것을 써도 확장의 주체가 될 수는 있다.
export interface Person {
name: string;
age: number;
}
// or
export type Person = {
name: string;
age: number;
}exam.ts
import { Person } from './exam.type';
// type은 확장이 불가능하다.
// type Developer extends Person
interface Developer extends Person {
language: string[];
}
const me: Developer = {
name: 'son',
age: 27,
language: ['js', 'ts']
}다른 부분은 크게 차이가 없지만 type키워드의 경우 확장 자체를 허용하지 않는다.
대신 interface는 확장을 허용하기 때문에 interface를 사용하는 것이 유리하다.
결론
interface를 사용하면 extends를 할 수 있기 때문에 코드의 가독성 측면에서도 이득을 볼 수 있고 관심사의 분리도 가능하다.
exam.type.ts
// Person이 갖는 속성이 10개 이상이라고 가정하자.
export interface Person {
name: string;
age: number;
...
}exam.ts
import { Person } from './exam.type';
interface Developer extends Person {
language: string[];
}이렇게 extends를 사용하면 Developer 타입은 Person에서 사용된는 속성을 명시하지 않아도 사용할 수 있고 Person이라는 추상객체를 분리할 수 있기 때문에 Person은 어디서든 재사용이 가능하기 때문에 이점이 있다.
