<aside> 📌
</aside>
타입스크립트를 사용했으니 당연히 타입을 지정해줄 일이 많았다. 그런데 코딩 컨벤션을 명확히 정해놓고 하지 않았더니 interface와 type alias의 사용이 무분별하게 되고 있다고 느껴질 때가 많았기에 정리해보려고 한다.
우선 처음 정리해보는 것이기 때문에 잘 정리된 예시를 찾아봤고, 그 결과 우아한 형제들의 방식을 참고하기로 했다.
type alias 사용
interface보다는 type alias를 사용했을 때 함수의 형태와 비슷하기 때문에 type alias가 더 가독성이 좋겠다고 판단하여 선택했다.
예시)
type TMyFunc = (a:number) => string;
const myFunc: TMyFunc = (a) => String(a);
type alias 사용
우아한 형제들은 IDE에서 type은 미리보기가 지원되고, interface는 지원이 되지 않는다는 것을 이유로 type alias를 사용했다고 했다. 이건 몰랐던 사실인데?
나는 이 경우에는 모두 interface를 사용하는 것으로 스스로 생각해두고 코딩을 했기 때문에 type을 사용한 경우가 없다. 그렇다보니 IDE에서 미리보기가 되고 안되고의 차이에 대해 몰랐던 것 같다. 혹시나 해서 내가 사용하는 IDE인 VSCode에서 interface와 type alias의 미리보기가 어떻게 되는지 확인해봤다.
interface
type alias
확실히 차이가 난다. interface는 미리보기가 되지 않아서 interface를 정의해둔 곳까지 찾아가야 하는 반면, type alias는 미리보기로 확인할 수 있었다.
게다가 이 둘은 선언 병합 가능 여부에서도 차이가 있는데, 간단히 말하자면 interface는 선언 병합이 가능하고 type alias는 불가능하다. 그러니까 같은 이름으로 된 타입을 선언할 때, interface는 같은 이름을 가진 interface끼리는 병합이 되고, type alias는 이것이 되지 않아서 에러가 발생한다.
선언 병합 예시)
interface Student {
id: number;
}
interface Student {
name: string;
}
const alice: Student = {
id: 1,
name: "Alice"
}
type Student = {
id: number
}
type Student = { // 'Student' 식별자가 중복되었습니다.
name: string
}