interface

|

코딩애플강의를 보고 정리했습니다.

interface

type을 이용한 타입설정과 유사함

object 자료형의 타입을 보다 편리하게 지정 가능하다.
EX)

// 마찬가지로 맨 앞글자는 대문자로써주는게 관례이다.
interface Square {
  color: string;
  width: number;
}

let 네모: Square = { color: 'red', width: 100 };

extends 가능

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

이런식으로 extends를 해주면 Teacher 타입은 age,name속성을 갖게된다.

type 키워드와 차이점?

extends 문법이 약간 다르다.

Ex) interface의 extends

interface Animal {
  name: string;
}
interface Cat extends Animal {
  legs: number;
}

Ex) type alias의 extends
(extends는 안되고, & 기호를 써서 object 두개를 합칠 수 있다. )

type Animal = {
  name: string,
};
type Cat = Animal & { legs: number };

근데, interface도 type처럼 & 기호를 이용해서 복사가능하다.

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

let 변수: Student & Teacher = { name: 'kim', age: 90 };

& 기호를 intersection이라고 부르는데, extends와 유사하게 사용가능하다.

타입이름 중복선언

Animal 타입은 name,legs 속성을 가지게 됨 type 선언을 자주 쓰는 외부 라이브러리 이용시 type 선언을 내가 덮어쓰기, override 하기 편리함

interface Animal {
  name: string;
}
interface Animal {
  legs: number;
}

interface의 경우 타입이름 중복선언을 허용해준다.
extends한 것과 동일하게 동작함

type의 경우 중복선언을 허용하지 않는다.

type으로 타입설정 같은 경우 매우 엄격하다.

// 에러남
type Animal = {
  name: string,
};
// 에러남
type Animal = {
  legs: number,
};

extends 할 때 object 안의 속성이 중복될 경우

interface Animal {
  name: string;
}
interface Dog extends Animal {
  name: number;
}

name 속성이 중복되는 상황인데, 이러면 에러가난다.

interface Animal {
  name: string;
}
interface Dog {
  name: number;
}

let 변수: Dog & Animal = { name: '멍멍' };

& 연산자로 Dog, Animal을 합쳐놓은 코드이다.
name 속성이 중복되는데, 이러면 에러가 난다.
type 키워드도 똑같음

정리

일반적인 상황에선 type 키워드를 자주 사용하는데,
다른 사람이 내 코드를 이용하는 상황이 많다면 interface로 유연하게 만드는게 좋다.
(그래서 타입스크립트로 작성된 라이브러리들은 interface로 타입 정해놓은곳이 많음)
혹은 object 자료형은 전부 interface로 만들고, 다른 자료형은 type 키워드로 만들고 이렇게 섞는것도 괜찮다고한다.
type과 interface문법을 잘 알고있다면, 기준은 정하기 나름이다.