Type과 Interface 차이점

타입과 인터페이스가 중복되는 기능이 많은 이유는 타입에 안되는 기능들을 추가하고 싶어서 인터페이스가 만들어졌다. 그래서 겹치는 부분이 있다.
하지만 타입은 할 수 있지만 인터페이스가 못하는게 있고
인터페이스는 할 수 있지만 타입은 못하는게 존재한다.

object 선언할 때

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

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

다를게 없다.

함수 선언할 때

interface IFunction {
  (x:number, y:number) : number; //x,y 파라미터가 들어가고 number타입이다. 그리고 반환은 number타입이다.
}

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

비슷하지만 interface에서 함수 정의할 때 에로우 대신 클론을 쓴다는 것이다.

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

// (1) primitive 타입 선언하기
type Name= string //Type만 가능

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

// (3) primitive list 또는 tuple 타입 선언하기
type TupleType = [number, string] // [1, "dasfasd"]가능

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

//interface merging
interface IRectangle{
  height:number;
}

interface IRectangle{
  width: number;
}

let rectangle : IRectangle= {
  height : 200,
  width : 100
} // 합쳐져서 모든 프러퍼티내용을 다 작성해야한다.

같은 인터페이스끼리 합쳐져서 사용할 수 있다. 인터페이스에 있는 내용을 다 작성해야한다.

반면에

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

// type TRectangle = {
//   width:number;
// } //에러발생

type으로 할 경우 에러가 발생한다.

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;
}  //메서드로 선언했을 땐 가능하다.

}

프로퍼티는 오버로딩이 안된다. 다른 인터페이스 있는 시그니처로만 선언이 가능하다.
반면에 메소드는 오버로딩이 가능하다.

profile
알고리즘 정리 블로그입니다.

0개의 댓글

Powered by GraphCDN, the GraphQL CDN