[TypeScript] interface

Object에서 쓸 수 있는 interface 문법

interface 문법을 쓰면 object 자료형의 타입을 편하게 지정할 수 있다. 

interface Square {
    color :string,
    width :number,
}

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

 

1. 대문자로 작명하고,

2. { } 안에 타입을 명시해주는 방식이 전에 사용한 type alias 하고 용도랑 기능이 비슷해 보인다. 

사실 똑같다. 

 

그렇다면 interface와 type의 차이점은 무엇일까? 

 

extends 기능

interface는 class와 유사하게 extends 기능이 있다. 

interface Person {
    name :string;
    age :number
}

interface Student extends Person {
    score :string;
}

extends 문법은 쉽게 말해 부모의 interface 값을 복사해 온다는 뜻이다. 

즉, Person 인터페이스의 내용을 Student도 가지고 있게 된다. 

 

사실 이런 기능은 type alias도 제공하긴 하지만 사용 방식이 다르다. 

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

type Student = {
    score :string;
} & Person

type alias는 & 기호를 사용해서 두 개를 합칠 수 있다. 

 

타입 이름 중복 선언

interface Person {
    name :string
}

interface Person {
    age :number
}

interface 같은 경우 타입 이름을 중복선언을 할 경우, extends 한 것과 동일하게 동작한다. 

즉, Person 타입은 name과 age 속성을 모두 가지고 있다. 

 

덕분에 Type 선언을 자주 쓰는 외부 라이브러리 이용 시 type 선언을 덮어쓰기, override 하기 편하다. 

type Person = {
    name :string
}

type Person = {  // 에러 발생
    age :number
}

type alias의 경우엔 중복 선언을 허용하지 않아서 에러가 난다. 

 

일반적인 상황에서는 type 키워드를 자주 활용하지만, 

여러 사람과 함께 코드를 사용하는 경우가 많다면 interface를 사용해서 유연하게 만드는 것도 좋은 방법이다. 

그래서 타입스크립트로 작성된 라이브러리의 경우 interface로 타입이 지정되어 있다. 

 

extends 시 속성명이 중복되는 경우 

interface Person {
    name :string
}

interface Student extends Person {  // 에러 발생
    name :number
}

만약에 extends를 사용할 때 부모 인터페이스와 속성명이 중복되면 즉시 에러가 발생한다. 

 

※ Person의 name과 Student의 name이 달라서 에러가 나는 것이지, 같다면 에러가 나지 않고 하나로 합쳐진다.