본문 바로가기
  • 삽질하는 자의 블로그
React/React-TypeScript

11. type? interface? 무엇을 써야 할까?

by 이게뭐당가 2022. 12. 29.

타입을 지정하기 위해서는, type 과 interface 를 사용한다. 

interface PersonInterface {
  name: string
  age: number
}

const person1: Person = {
  name: 'ms',
  age: 29,
}

type PersonType = {
  name: string
  age: number
}

const person2: PersonType = {
  name: 'js',
  age: 30,
}

 

각각의 사용 이유에 대해 알아보도록 하자

 

1. 사용하는 데이터의 형태

interface PersonInterface { // 척봐도 객체만 사용가능하게 생겼다.
  name: string
  age: number
}

type PersonType = {		// 여러가지 타입에 전부 사용 가능하다.
  name: string
  age: number
}

interface는 객체타입에만 사용 가능하다.

그렇지만 그게 큰 문제는 될 것 같지 않다.

 

 

 

 

2. 확장의 차이

타입의 경우

type msType = {
  name: string
}

type msType = {
  age: number
}

// Error : Duplicate identifier 'msType'

중복 선언이 불가능하다.

 

 

 

interface 의 경우

interface msType {
  name: string;
}

interface msType {
  age: number;
}

const person:msType = {
    name:"ms",
    age:30
}

// 편-안

선언전 확장을 지원한다.

이름만 동일하게 사용하고, 더 적으면 더 적힌다.

 

 

 

3. computed value 의 사용 가능 여부

// type 은 가능하다.

type names = 'firstName' | 'lastName'	// 키를 따로 지정

type NameTypes = {
  [key in names]: string			// computed 로 value를 따로 지정
}

const ms: NameTypes = { firstName: 'ms', lastName: 'choi' }	// 사용




// interface 는 불가능하다.

interface NameInterface {
  // error
  [key in names]: string		// computed value 사용 불가능
}

 

 

댓글