[Typescript] Type vs Interface

Type vs Interface

드디어 대망의 타입스크립트에 발을 들이게 되었다

예에에ㅔㅔㅇ에에에에전 프로젝트에서 잠깐 깔짝해본 (에러범벅만 기억에 남은) 타입스크립트를 다시금 손대면서 기본적으로 알아야 할 것 같은 사항들을 정리해본다

type과 interface는 둘 다 새로운 자료형 (타입) 을 정의하고 이름붙일 수 있지만, 보편적으로 interface를 사용하기를 권장하고 있다

왜때문일까?

공통점

type TGame = {
    name: string;
    genre: string;
    cost: number;
}

const rainWorld: TGame = {
    name: 'rainWorld',
    genre: 'adventure',
    cost: 12000,
};

interface IGame {
    name: string;
    genre: string;
    cost: number;
}

const rainWorld: IGame = {
    name: 'rainWorld',
    genre: 'adventure',
    cost: 12000,
};

생김새만 보면 거~~의 차이가 없다

기껏해야 interface에는 =이 안 붙고 type에는 =이 붙는 정도

둘 다 새로운 자료형을 정의하고 이름붙일 수 있다

보통 type로 선언한 형식은 이름 앞에 T를 붙이고, interface로 선언한 형식은 이름 앞에 I를 붙인다

차이점

만약 위의 type / interface로 선언한 자료형에 goty 항목을 추가하고 싶다고 가정하자

Type

type TGame = {
    name: string;
    genre: string;
    cost: number;
}

type TGotyGame = TGame & {
    goty: number;
}

const zeldaBOTW: TGotyGame = {
    name: 'The Legend of Zelda Breath of the Wild',
    genre: 'adventure',
    cost: 65000,
    goty: 4,
};

type을 확장할 땐 & 기호를 사용하여 새로운 이름으로 선언한다

 

type TGame = {
    name: string;
    genre: string;
    cost: number;
}

type TGame = {
    goty: number;
}

// error

type은 선언적 확장 (같은 이름으로 다시 한번 선언함으로써 타입을 확장) 이 불가능하므로 같은 이름의 type를 두 번 선언하면 오류가 발생한다

따라서 기존 타입에 새로운 속성을 추가하고 싶으면 매번 다른 이름으로 재선언 해 주어야 한다

 

type TNickName = string;

type은 객체뿐만 아니라 단일 요소에도 사용할 수 있다

 

type TTuple = [number, number];

const tuple: TTuple = [0, 1];

그말인즉슨 배열을 선언하여 튜플처럼 사용할 수 있으며, 배열의 메서드들을 사용 가능하다

Interface

interface IGame {
    name: string;
    genre: string;
    cost: number;
}

interface IGotyGame extends IGame {
    goty: number;
}

const zeldaBOTW: IGotyGame = {
    name: 'The Legend of Zelda Breath of the Wild',
    genre: 'adventure',
    cost: 65000,
    goty: 4,
};

interface를 확장할 땐 extends를 사용한다

 

interface IGame {
    name: string;
    genre: string;
    cost: number;
}

interface IGame {
    goty: number;
}

/*
interface IGame {
    name: string;
    genre: string;
    cost: number;
    goty: number;
}
*/

interface의 한 가지 특이할만한 점은 선언적 확장이 가능하기 때문에 같은 이름으로 재선언하면 자동으로 해당 내용으로 확장된다

 

interface INickName extends string {}

// error

interface는 객체에서만 사용가능하다

근데 솔직히 단일 요소에 타입 지정할거면 그냥 원본 타입 쓰고 말지 않나 싶기도 하다

다만 유사 튜플을 구현할 수 없다

결론

그외에도 type는 인덱스 시그니쳐를 사용가능하지만 interface는 사용불가능하단 차이점도 있는데 이 부분은 인덱스 시그니쳐를 먼저 공부해야 할 것 같다

type과 interface 중 무엇을 쓸 지는 사용자의 자유지만 가급적 코드 내에서 통일성을 가지는 게 좋고, interface가 그 확장성 때문에 조금 더 권장되는 편이다

보통 타입을 미리 지정하는 경우는 API 응답을 받을 때 데이터 형식 지정때문이 잦은데, API 응답의 타입 형식은 로직에 따라 받아올 데이터가 달라지기 때문에 확장에 자유로운 것이 로직 작성에 수월할 듯

참고자료

타입스크립트 type과 interface의 공통점과 차이점

Type vs Interface, 언제 어떻게?