interface

interface 선언은 object 유형의 이름을 지정하는 또 다른 방법이다.

interface Point {
  x: number;
  y: number;
}
 
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });

type alias와 용도와 기능이 똑같다.
1. 대문자로 작명.
2. {} 안에 타입을 명시하면 된다.

※ 한 줄 끝나면 콤마대신 세미콜론도 사용 가능

interface 장점

interface 장점은 extends도 가능하다.

interface Student {
  name :string,
}
interface Teacher {
  name :string,
  age :number,
}

중복을 아래처럼 처리한다.

interface Student {
  name :string,
}
interface Teacher extends Student {
  age :number
}

extends 를 활용하여 Teacher 에는 name 과 age 속성을 모두 갖게 되었다.

type vs interface

Type aliases 와 interfaces 는 매우 유사하며 대부분의 경우 자유롭게 선택 할 수 있다. interfaces의 거의 모든 기능은 type에서 사용할 수 있으며, 주요 차이점은 type에서 re-open 하여 새 속성을 추가 할 수 없는 것과 항상 확장 가능한 인터페이스가 있다는 것이다.

extends 의 차이

interface

interface Animal {
  name: string
}

interface Bear extends Animal {
  honey: boolean
}

const bear = getBear() 
bear.name
bear.honey

type

type Animal = {
  name: string
}

type Bear = Animal & { 
  honey: boolean 
}

const bear = getBear();
bear.name;
bear.honey;

참고로 interface 도 type 처럼 & 연산자를 사용하여 extends 할 수 있으나 방식은 조금 다르다.

interface Animal = {
  name: string
}

interface Bear { 
  honey: boolean 
}

const bear :Animal & Bear = getBear();
bear.name;
bear.honey;

자료 추가의 차이

interface
interface의 경우 타입이름 중복선언을 허용해주며 중복시 extends 한 것이랑 동일하게 동작한다.
type 선언을 자주 쓰는 외부 라이브러리 이용시 type 선언을 덮어쓰기, override 하기 편리하다.

interface Window {
  title: string
}

interface Window {
  ts: TypeScriptAPI
}

const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});     

type
type은 한 번 선언하면 자료를 추가 할 수 없다.

type Window = {
  title: string
}

type Window = {
  ts: TypeScriptAPI
}

 // Error: Duplicate identifier 'Window'.

그래서 일반적인 상황에선 type 키워드 자주 활용하면 된다.

하지만, 다른 사람이 내 코드를 이용하는 상황이 많으면 interface로 만드는게 좋다.

참고 및 출처
코딩애플 강의
https://www.typescriptlang.org/
https://joshua1988.github.io/ts/