[TypeScript] interface와 type 비교(인터페이스, 타입 별칭) 그리고 변경 불가능한 interface와 type 만들기

Interface 와 type의 차이

1번. 확장 방식

interface(인터페이스)와 type(타입 별칭)의 가장 큰 차이점은 extends 키워드로 타입의 확장이 가능하냐 불가능하냐 이다. 

interface(인터페이스)는 extends로 확장이 가능하지만 type(타입 별칭)은 확장이 불가능하다.

extends로만 확장이 불가능할 뿐 type 또한 아래와 같은 방식으로 확장이 가능하긴하다.

ex)

type test1 = {name: string}

type test2 = test1 & {age: number}

const test3: test2 = { name: 'd', age: 33 }

extends로 확장이 필요한 경우가 많기 때문에 interface를 사용하는것이 좋다.

추가적으로 

interface의 경우 다른곳에서 동일한 이름의 interface를 정의하게되면 동일한 명칭의 interface를 하나의 interface로 합친다.

그래서 특정 라이브러리에 내가 원하는 타입을 추가하거나 확장할 때 d.ts 파일에서 interface로 정의하면 해당 라이브러리에 선언된 interface 와 내가 추가적으로 작성한 interface가 합쳐진다. 

반면에 type을 사용하여 동일한 이름으로 다른곳에서 type을 정의하게되는  경우에는 에러가 발생한다.

2번. 상세 타입 정보 제공

아래 사진과 같이 interface는 상세 타입정보가 나오지 않지만 type의 경우 상세 타입정보가 나온다.

하지만 interface를 사용하더라도 해당 interface를  cmd + 클릭하면 interface가 정의된 곳으로 바로 가서 타입을 확인할 수 있다.

interface (인터페이스)

type (타입 별칭)

3번 interface 는 객체를 정의하는것이고, type 은 타입과 객체를 두개를 모두 정의할 수 있다.

interface RSP {

ROCK: string;

SISSORS: string;

PAPER: string;

}

type score = {

shoot: 3;

assist: 2;

jump: 1;

}

| string;

interface 는 유니언(Unions)을 사용하면 에러가 발생하는 반면에

type 은 유니언(Unions)를 사용하여 또다른 타입을 정의할 수 있다.

추가적으로 

변경 불가능한 Interface 만들기

interface RSP {

readonly ROCK: string;

readonly SCISSORS: string;

readonly PAPER: string;

}

const rsp: RSP = {

ROCK: '0',

SCISSORS: '-142px',

PAPER: '-284px',

};

rsp.ROCK = 1; //Error: Cannot assign to 'ROCK' because it is a read-only property.ts(2540)

type RSP = {

readonly ROCK: string;

readonly SCISSORS: string;

readonly PAPER: string;

};

const rsp: RSP = {

ROCK: '0',

SCISSORS: '-142px',

PAPER: '-284px',

};

rsp.ROCK = '23123'; //Error: Cannot assign to 'ROCK' because it is a read-only property.ts(2540)

일반적으로 interface를 선언한경우 해당 interface 타입으로 설정하여도 객체의 값을 변경할 수 있다.

하지만 이러한 값의 변경을 엄격히 제한하고자 한다면 readonly 키워드를 사용하여 변경 불가능하도록 제한할 수 있다.

const의 경우 상수를 선언할 때 사용되지만 객체의 경우 값을 참조하기 때문에 추후에 값을 수정할 수 있다.

그러므로 readonly 키워드를 작성하여 참조를 통한 값의 변경을 제한할 수 있다.