type이랑 interface 뭐가 다른거였어...? - type과 interface 차이 알아보기

지금까지 주위에서 typescript에서 type과 interface의 차이가 뭐냐고 하면 항상 제대로 대답을 하지 못했다 그래서 이번기회에 제대로 알아보려고 한다!

 

type과 interface의 차이를 아려면 일단 당연하게도 type과 interface가 뭔지 알아야한다!🙂

 

type (alias)

type은 변수에 type을 저장하여 사용하는 것이라고 말할 수 있다

type Name = string;

// 변수의 타입을 alias로 지정
const myName: Name = "gaon";

// 함수의 타입도 정의 할수도 있다
type Str = () => string;

const str: Str = function () {
  return "hi";
};

 

interface

interface는 상호 간에 정의한 약속 혹은 규칙을 정할때 사용한다

나는 interface는 주로 객체의 규칙을 지정할때 사용한다

interface person {
  name: string;
  readonly age?: number;
  gender: "M" | "W";
}

const gaon: person = { name: "gaon", age: 18, gender: "M" };

 

물론 객체 말고 다른 것들의 규칙을 정할수도 있다

// 함수의 타입을 정의

interface Add {
  (num1: number, num2: number): void;
}

const add: Add = (x, y) => {
  console.log(x + y);
};

---

차이점

• 프리뷰
• 자료형
• 확장

 

프리뷰

type과 interface로 객체의 규칙을 똑같이 정했을때 VSCode 프리뷰가 다르다는 차이가 있다

 

type은 객체의 속성의 타입까지 다나오지만 interface는 나오지 않는다

 

자료형

type은 원시 자료형(boolean, string, number 등)의 타입을 지정할 수 있지만 interface는 할 수 없다

 

type Number = number;
type String = string;
type Boolean = boolean;

const n: Number = 1;
const s: String = "string";
const b: Boolean = true;

// interface는 할 수 없다ㅜ🥲

 

확장

type과 interface는 확장하는 방법도 다르다

 

type은 선언적 확장이 되지 않고 무조건 &를 사용해 확장해야 한다

하지만 interface의 경우 선언적 확장이 가능하고 extends를 사용해서도 확장 가능하다

 

type 확장

type Person = { name: string; age: number };

type Developer = Person & { language: "js" | "java" };

const kim: Developer = { name: "kim", age: 21, language: "js" };

 

interface 확장

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

interface Developer extends Person {
  language: "js" | "java";
}

const bang: Developer = { name: "bang", age: 15, language: "java" };

 

※ 선언적 확장은 같은 이름으로 interface를 생성하면 알아서 확장이 되는 식이다

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

interface Developer {
  language: "js" | "java";
}

const lee: Developer = { name: "lee", age: 35, language: "java" };

 

---

마무리

이렇게 type과 interface의 차이점을 알아봤는데 앞으로 코드를 짤때 type과 interface의 차이점을 생각하면서 코드를 짠다면

더욱 좋은 코드를 짤수 있을 것 같다