TypeScript 인터페이스와 타입의 차이

interface와 type을 무지성으로 사용하다 둘의 차이가 궁금해졌다.

 

사용

interface와 type의 기본적인 사용법은 다음과 같다.

interface IPost {
    title: string;
    content: string;
    author: number;
    createdAt: string;
}

type TPost = {
    title: string;
    content: string;
    author: number;
    createdAt: string;
}

const postInterface: IPost = {
    title: "게시글 제목",
    content: "게시글 본문",
    author: 1,
    createdAt: new Date().toISOString(),
};

const postType: TPost = {
    title: "게시글 제목",
    content: "게시글 본문",
    author: 1,
    createdAt: new Date().toISOString(),
}

 

차이

1. 확장 키워드

interface와 type 둘 다 확장이 가능하며 inteface는 extends type은 & 키워드를 사용한다.

interface IUser {
    id: number;
    email: string;
    password: string;
}

interface IUserDetail extends IUser {
    introduce: string;
    gender: boolean;
}

type TUser = {
    id: number;
    email: string;
    password: string;
}

type TUserDetail = TUser & {
    introduce: string;
    gender: boolean;
}

const userInterface: IUserDetail = {
    id: 1,
    email: "email",
    password: "password",
    introduce: "introduce",
    gender: true,
}

const userType: TUserDetail = {
    id: 1,
    email: "email",
    password: "password",
    introduce: "introduce",
    gender: true,
}

 

2. 선언 병합(Declaration Merging)

inteface는 동일한 이름을 반복적으로 선언해도 컴파일 과정에서 병합된다. 즉 같은 이름으로 여러 번 선언이 가능하다. 

반면 type은 불가능하다.

interface IPost {
    title: string;
    author: number;
}

interface IPost {
    content: string;
    createdAt: string;
}

const postInterface: IPost = {
    title: "title",
    author: 1,
    content: "content",
    createdAt: "createdAt",
}

 

추가로 type은 intersection(&), union(|), tuple 키워드를 사용할 수 있다.

intersection은 & 키워드로 사용하며 자바스크립트의 && 연산자(A와 B 모두 만족)와 동일한 개념이다.

interface IUser {
    email: string;
}

interface IPost {
    title: string;
}

type TUserAndPost = IUser & IPost;

const userAndPost: TUserAndPost = {
    email: "email",
    title: "title",
}

 

union은 | 키워드로 사용하며 자바스크립트의 || 연산자(A와 B 둘 중 하나 만족)와 동일한 개념이다.

type TPhoneBrand = "애플" | "삼성" | "샤오미";

 

 

참고 자료

https://guiyomi.tistory.com/109

https://velog.io/@soulee__/TypeScript-Union-Type