[TypeScript]


썸네일

TypeScript는 변수 및 함수에 대한 유형을 지정하여 오류를 줄이고 코드 안정성을 높이는 이점이 있는 JavaScript의 상위 집합 언어입니다.

TypeScript에서 유형을 정의하는 방법으로 “인터페이스”와 “유형”이 있으며 둘 다 유사한 기능을 가지고 있습니다.

두 기능의 차이점을 살펴보겠습니다.

상호 작용

인터페이스는 TypeScript의 고유한 개념이며 객체의 유형을 정의하는 수단입니다.

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

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

위의 코드에서 사용자는 인터페이스 이름으로 사용자 개체를 정의하고 있으며 향후 사용자 인터페이스를 사용하여 개체를 만들 수 있습니다.

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

이러한 인터페이스를 사용함으로써 객체의 타입을 명확하게 정의할 수 있고 다른 코드에서 쉽게 사용할 수 있습니다.

유형

유형을 유형 별칭 또는 유형 식별자라고 합니다.

기존 타입에 다른 이름을 부여하여 사용할 수 있는 기능입니다.

다음과 같이 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이 유형에 대해 정의되기 때문에 복합 유형은 유형 별칭을 사용하여 간결하게 표현할 수 있습니다.