Interface, Type Alias

타입스크립트에서 객체의 커스텀 타입을 정의하는 방법에는 interface, type 이렇게 2가지가 있다. 이 2개의 방법에 대해서 알아보자.

Interface

An interface declaration is another way to name an object type

Typescript 공식문서에 쓰여있는 interface의 설명이다. 해석하자면 객체의 타입에 별칭을 정하는 다른 방법이다.

interface Sample {
    name: string;
}
function useInterface(user: Sample){
    const {name} = user;
    console.log(name);
}

const user1 = '인터페이스'
useInterface(user1); // '인터페이스'

이런식으로 객체가 어떠한 타입을 가질것인지 명시적으로 정해줄수 있다.

만약 interface로 정의한 속성에 확장이 필요하다면

// extends 키워드를 사용한 확장
interface Sample {
    name: string;
}
interface ExtendSample extends Sample {
    age : number;
}
const user2 : ExtendSample = {
    name : 'extends를 사용해 확장된 인터페이스',
    age : 12
}

// 선언적 확장
interface ExtendSample {
    address : string;
}
const user3 : ExtendSample = {
    name : '선언적 확장을 사용한 인터페이스',
    age : 20,
    address : '서울 특별시'
}

위 예시 코드처럼extends 키워드를 사용하여 확장 하거나, 같은 이름의 interface를 다시 선언하여 확장할 수 있다.

interface는 위 예시처럼 객체의 타입을 정의하는데 사용되지만, 원시 자료형은 사용이 불가능하다.

// 아래처럼 원시 자료형을 interface를 정의하는 것은 불가능하다.
interface Address extends string{
}

Type Alias

type alias 역시 interface와 비슷한 역할을 수행한다. 특정한 타입 또는 interface를 참조할수 있는 타입 변수를 칭하는 키워드이다. interface와 마찬가지로 확장이 가능하지만 extends 키워드 대신 & 키워드를 사용한다.

유의할 점은 interface는 선언적 확장이 가능했지만, type은 선언적 확장이 불가능하다.

type Sample = {
    name : string;
}
const user1 : Sample = {
    name : '타입사용'
}

// type 확장
type Sample2 = Sample & {
    age : number;
}
const user2 : Sample2 = {
    name : '타입 확장',
    age : 20
}

// Error: Duplicate identifier 'Sample'.
type Sample = {
    address : string
}

type은 새로운 유형을 정의하는것이 아니라 기존의 타입에 대해 새로운 별칭을 정의할 뿐이다.

interface

type alias

위 사진을 보면 interface를 사용하면 해당 자료형이 새롭게 생성되는데 반해, type alias를 사용했을때는 별칭만 생성된 것을 볼수 있다.

따라서, interface에서 불가능하던 원시 자료형의 사용이 가능하다.

type PrimitiveType = string;
type PrimitiveType2 = string | number;

이런식으로 기존에 사용하는 원시자료형에 대해서 type alias를 선언 할수도 있다.