Type VS Interface

September 25, 2024

Type vs Interface

Object 선언할때

interface IObject {
  x: number;
  y: number;
}

type TObject = {
  x: number;
  y: number;
};

function을 선언할때

interface IFunction {
  (x: number, y: number): number;
}

type TFunction = (x: number, y: number) => number;

Type에서는 할 수 있지만 interface에서는 할 수 없는 것들

// 1) primitive type 선언하기
type Name = string;

// 2) union type 선언하기
type UnionType = string | number;

// 3) primitive list 또는 tuple 타입 선언하기
type TupleType = [string, number];

Interface는 할 수 있고 Type은 못하는 것

interface merging

interface IRectangle {
  height: number;
}

interface IRectangle {
  width: number;
}

let rectangle: IRectangle = {
  height: 20,
  width: 30,
};

// type TRectangle = {
//   height: number;
// };

// type TRectangle = {
//   width: number;
// };

Interface Merging

class Review {
  // 프로퍼티
  getY = (x: number) => {
    return x;
  };

  // 메서드
  getX(x: number) {
    return x;
  }
}

interface GetXnY {
  getX: (x: number) => number;
  getY: (y: number) => number;
}

interface GetXnY {
  getX: (x: number) => number;
  //   getY: (y: string) => number;
}

interface GetXnY2 {
  getX(x: number): number;
  getY(y: number): number;
}

interface GetXnY2 {
  getX(x: number): number;
  getY(y: string): number;
}

const testMethod: GetXnY2 = {
  getX(x) {
    return x;
  },
  getY(y) {
    return 1;
  },
};