타입스크립트 type vs interface 차이

type 예시와 interface 예시

매우 흡사하다고 느껴지고, type alias의 변화로 더 그 관계의 차이는 모호해지고 있습니다. 이번에도 면접을 준비할 때, 제대로 명확한 이유가 없이 말을 한거같아 다시 머릿속을 정리하려합니다 :)

type은 아래 코드처럼 union 또는 자바스크립트에서 쓰는 && 연산식 등 활용도가 높은데요. 이는 데이터를 담는 용도로 활용됩니다. 반면에 interface는 OOP와 같이 extends를 활용한 규격이 정해진 데이터 타입 이라고 보면 될거같습니다. 정해진 규칙에 api들이나 데이터 타입들을 미리 정해놓고 types폴더에 관리하는 등 정해진 계약과 같은 용도라고 보면 될거같네요.

정리하자면 type은 다양한 활용도로, 당시에 활용하는 데이터를 담는 박스라고 생각하면 될거같고, 좀 더 자유로운 성격입니다. interface는 계약서와 같은 OOP처럼 정해진 데이터를 약속하듯이 다룬다고 보면 이해가 편할거 같네요. 정확한 정답은 없고 다양한 해석이 있을거 같습니다!

{
  type PositionType = {
    x: number;
    y: number;
  };
  interface PositionInterface {
    x: number;
    y: number;
  }

  // object ★
  const obj1: PositionType = {
    x: 1,
    y: 1,
  };
  const obj2: PositionInterface = {
    x: 1,
    y: 1,
    z: 1,
  };

  // class ★
  class Pos1 implements PositionType {
    x: number;
    y: number;
  }
  class Pos2 implements PositionInterface {
    x: number;
    y: number;
  }

  // Extends
  interface ZPositionInterface extends PositionInterface {
    z: number;
  }

  // 사실은 둘다 확장가능
  // 이건 처음보네 &&=> &

  type ZPositionTypeMe = PositionType & { z: string };
  type ZPositionType = PositionType & { z: number };

  // 😆 only interfaces can be merged. => "두번 지정가능 type은 안된다."
  interface PositionInterface {
    z: number;
  }

  // type PositionType {
  // }


  // 😆 Type aliases can use computed properties
  type Person = {
    name: string;
    age: number;
  };

  type Name = Person["name"]; // string

  type NumberType = number;
  type Direction = "left" | "right";  //유니언타입
}


// 'type은 명시적으로 타입을 지정하거나 활용하거나 여러 조건을 걸때' || interface는 객체 지향적으로 데이터적으로 접근'

<참조>앨리님 드림코딩 강의