[TS] interface & Type 차이점

김재민·2021년 12월 15일
0

사용법

- interface

	interface Person{
      	name: string
      	age: number
    };

- Type

	Type Person = {
     	name: string,
      	age: number,
    }

차이점

확장하는방법

interface People {
  name: string
  age: number
}

interface StudentInterface extends People {
  school: string
}

type PeopleType = {
  name: string
  age: number
}

type StudentType = PeopleType & {
  school: string
}

선언적 확장
interface에서 할 수 있는 대부분의 기능들은 type에서 가능하지만, 한 가지 중요한 차이점은 type은 새로운 속성을 추가하기 위해서 다시 같은 이름으로 선언할 수 없지만, interface는 항상 선언적 확장이 가능하다는 것이다. 그 차이에 대한 예제가 바로 밑에 있는 것이다.

computed value의 사용

type은 가능하지만 interface는 불가능

type names = 'firstName' | 'lastName'

type NameTypes = {
  [key in names]: string
}

const yc: NameTypes = { firstName: 'hi', lastName: 'yc' }

interface NameInterface {
  // error
  [key in names]: string
}
profile
Junior Front-end engineer

0개의 댓글