타입스크립트 Type aliases vs Interface

타입스크립트에서는 Type을 정의를 할수가 있는 Type aliases 와 Interface가 있습니다. 

 

type aliases 는 단어 그대로 type에 대한 별칭을 선언을 할수가 있습니다. 예를들어 

// string 타입을 이용때 
const name: string = 'cafejun';

// 타입 별칭을 사용한때 
type MyName = string;
const name: MyName = 'cafejun';

위 코드와 같이 string 뿐만아니라 number,boolean 등 기본타입을 따로 별칭을 선언할수도 있고 interface,object,Array,Tuple등 참조타입 에서도 별칭을 부여할수도 있습니다. 

 

참조 타입을 예를 들면 만약에 아메리카노를 만들기위해 makeCoffee를 함수를 호출을 해야하고 전체 합이 3보다커야 한다는 가정을 세웁시다. 그리고 3보다 아래이면 재료부족으로 커피를 만들수가 없다고 재료 부족이라는 문자열 값을 반환하는 함수를 작성을 했습니다. 

function makeCoffe(water: number,coffee,barista: number): string {
    return water/ 3 + coffee + barista > 3 ? '커피제조완료' : '재료 부족'
}

위 코드를 보면 커피를 만들기 위해 물,커피원두,바리스타가 필요합니다. 함수의 파라미터의 갯수가 많고 가독성이 높아보이지 않습니다. 여기서 type alises 를 사용하면 공통된 속성을 모아 type 을 선언하뒤 참조를 할수가 있습니다. 

type Americano = {
    water: 10;
    coffee: 3;
    barista: 1;
}

function makeCoffee(input: Americano): string {
    return input.water/ 3 + input.coffee + input.barista > 3 ? '커피제조완료' : '재료 부족'
}

type aliase 는 interface와 기능이 거의 비슷하지만 미묘한 차이가 있습니다. 바로 interface는 확장과 필드 추가가 자유로운 반면 type aliases 는 그렇지 못합니다. 아래 코드를 확인해 봅시다 

interface Window {
  title: string
}

interface Window {
  ts: import("typescript")
}

const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});
        

interface 에서는 extends 키워드로  상속이 가능합니다. 하지만 type aliases 에서는 해당 부분을 실행하게 되면 중복 에러를 출력하게 됩니다. 

 

type Window = {
  title: string
}

type Window = {
  ts: import("typescript")
}

// Error: Duplicate identifier 'Window'.

 

즉 이러한 선언 방법을 선언 병합이라고 하는데 interface 는 동일한 이름으로 여러번 선언 해도 컴파일 시점에서 합칠수가 있습니다. 

타입스크립트 개발자들은 Type alise 보다는 interface 사용을 권하하고 고정타입 또는 튜플 타입에 대해서는 Type alises 를 권장하고 있습니다. 

 

참고 URL : 

type alias vs interface : https://www.typescriptlang.org/docs/handbook/advanced-types.html

type alias : https://joshua1988.github.io/ts/guide/type-alias.html#%ED%83%80%EC%9E%85-%EB%B3%84%EC%B9%AD-type-aliases

type aliase vs interface : medium.com/humanscape-tech/type-vs-interface-%EC%96%B8%EC%A0%9C-%EC%96%B4%EB%96%BB%EA%B2%8C-f36499b0de50