본문 바로가기

DEV/JS, TS

[TypeScript] 타입스크립트에서 type과 interface의 차이점

thumbnail

 

타입스크립트는 자바스크립트의 상위 집합 언어로 변수, 함수 등에 타입을 명시하여 실수를 줄이고 코드의 안정성을 높이는 장점을 가진다.

 

타입스크립트에서 타입을 정의할 수 있는 방법으로 'Interface'와 'Type'이 있으며, 둘 다 유사한 기능을 가지고 있는데,

두 기능은 차이점을 알아보겠습니다.

Interface

Interface는 타입스크립트 만의 고유한 개념으로, 객체의 타입을 정의하기 위한 수단이다.

인터페이스로 사용자 객체를 정의하면 다음과 같다.

interface User {
  name: string;
  age: number;
}

위 코드를 보면 User는 인터페이스 이름으로 사용자 객체를 정의하고 있는데, 앞으로 User 인터페이스를 사용하여 객체를 생성할 수 있다.

const myUser: User = {
  name: 'John',
  age: 30
}

이렇게 인터페이스를 사용하면 객체의 타입을 명확하게 정의할 수 있고, 다른 코드에서도 쉽게 사용할 수 있다.

Type

Type은 타입 별칭(type alias) 또는 타입 지정자(type specifier)로 불리며,

이미 존재하는 타입에 다른 이름을 붙여서 사용할 수 있는 기능으로

다음과 같이 type을 사용하여 사용자 객체를 정의할 수 있다.

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

Interface와 다르게 Type은 객체뿐만 아니라, 기본 타입, 유니온 타입 등 모든 타입에 대해 별칭을 지정할 수 있다.

예시 코드

interface UserInterface {
  name: string;
  age: number;
}

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

const user1: UserInterface = {
  name: 'John',
  age: 30
}

const user2: UserType = {
  name: 'Jane',
  age: 25
}

위 코드에서 UserInterface와 UserType은 모두 사용자 객체를 정의하는 인터페이스와 타입인데

둘 다 객체의 타입을 명확하게 정의할 수 있지만, UserType은 type을 사용하여 정의되었기 때문에 타입 별칭으로 복잡한 타입을 간결하게 표현할 수 있었다.

반응형

'DEV > JS, TS' 카테고리의 다른 글

[TypeScript] 타입스크립트의 기본 타입 정리  (0) 2023.03.07
[JavaScript] == 과 ===의 차이점  (0) 2023.02.27