TypeScript 인터페이스 와 type

인터페이스

인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다.

• 객체의 스펙(속성과 속성의 타입)
• 함수의 파라미터
• 함수의 스펙(파라미터, 반환 타입 등)
• 배열과 객체를 접근하는 방식
• 클래스

 

인터페이스

interface User {
  age: number;
  name: string;
}

var person: User = {
  age: 30,
  name: "aa",
};

function getUser(user: User) {
  console.log(user);
}

getUser(person); //   age: 30, name: "aa"

 

옵션 속성

인터페이스를 사용할 때 인터페이스에 정의되어 있는 속성을 모두 다 꼭 사용하지 않아도 됩니다. 이를 옵션 속성이라고 합니다. 문법을 보겠습니다.

 

interface 인터페이스_이름 {
  속성?: 타입;
}

interface CraftBeer {
  name: string;
  hop?: number;  
}

let myBeer = {
  name: 'Saporo'
};
function brewBeer(beer: CraftBeer) {
  console.log(beer.name); // Saporo
}
brewBeer(myBeer);

코드를 보면 brewBeer() 함수에서 Beer 인터페이스를 인자의 타입으로 선언했음에도 불구하고, 인자로 넘긴 객체에는 hop 속성이 없습니다. 왜냐하면 hop을 옵션 속성으로 선언했기 때문이죠.

 

읽기 전용 속성

읽기 전용 속성은 인터페이스로 객체를 처음 생성할 때만 값을 할당하고 그 이후에는 변경할 수 없는 속성을 의미합니다. 문법은 다음과 같이 readonly 속성을 앞에 붙입니다.

 

interface CraftBeer {
  readonly brand: string;
}

let myBeer: CraftBeer = {
  brand: 'Belgian Monk'
};
myBeer.brand = 'Korean Carpenter'; // error!

type

하나의 타입이 아닌 여러가지 타입이 적용될떄 사용

type RSP = {
  readonly Hello: "a";
};

type Hello = string | number; // 다재다능한
type Hello2 =
  | {
      ROCK: string;
      SCISSORS: string;
    }
  | string; // 객체 또는 문자가 들어갈수 있다
const hi1: Hello2 = "string";
const hi2: Hello2 = {
  ROCK: "0",
  SCISSORS: "-142px",
};

객체 마지막에 |  or 연산자를 붙혀 두가지중 하나만 들어가도 오류가 뜨지 않는다.