[Typescript] Interface와 Type

진히·2023년 11월 1일
0

공부중🤓

목록 보기
16/17
post-custom-banner

공통점

Typescript에서 타입을 정의할 때 사용하는 2가지 방법 interfacetype.
비슷한 거 같은데 왜 나눠놓았는지 궁금해서 찾아봤습니다🙂

공통점을 먼저 보자면,
두 방법 모두 객체의 타입이나 함수의 타입을 정의할 수 있고
변수 타입, 함수의 반환값을 지정해주며, 확장이 가능하다는 공통점이 있습니다.

type User = {
  name: string,
  age: number
}
interface User = {
  name: string,
  age: number
}

차이점

Type Alias

타입 별칭이라고 부르며, 새로운 타입을 정의하고 싶을 때 사용합니다.

원시값 타입 선언

type str = string;

Intersection Type(&) - 확장

interface동일한 이름으로 선언을 하면 오류가 나고, &을 사용하여 확장만 가능합니다.

type User = {
  name: string,
  age: number
}
type Student = User & {
  country: string
}

const kim: Student = {
  name: 'Kim',
  age: 20,
  country: 'South Korea'
}

유니온(|) 사용

type fruit = 'banana' | 'apple' | 'grape'

튜플

type Tuple = [string, number];

Interface

선언 병합

interface는 type과 달리 동일한 이름을 사용하면 병합이 되며 확장됩니다.

interface Box {
  weight: number;
}
interface Box {
  height: number;
}

const container: Box = {
  weight: 100,
  height: 100
}

extends

extends를 사용해 확장도 가능합니다.

interface User {
  name: string;
  age: number;
}
interface Student extends User {
  country: string;
}

const kim: Student = {
  name: 'Kim',
  age: 20,
  country: 'South Korea'
}

무엇을 써야하는지 고민이라면

튜플이나 원시값 타입 선언 등 Type을 써야할 때가 아니라면 가능한 Interface를 사용합니다.
이게 Typescript 팀에서 권장하는 방향이라고 하네요🙂

profile
티모누나예요🐶
post-custom-banner

0개의 댓글