[TypeScript] type과 interface 사용법과 공통점 및 차이점

keynene·2023년 7월 26일
0

TypeScript

목록 보기
2/5

Type VS Interface

타입스크립트에서 type과 intertace는 값의 타입에 대한 구조를 정의하기 위해 사용하지만 약간의 차이가 있다. 프로젝트의 성격을 고려해서 협의 후 둘 중 원하는 자료형을 사용하면 된다.




type & interface 기본문법

📝타입지정

/* Type */
//Type정의
type personType = {  //변수처럼 사용하므로 "="로 대입해준다는 느낌
  name :string,
  age :number
}
type numberOrStringType = number | string; //union type 선언 가능

//Type사용
let person1 :personType = {
  name :'keynene',
  age :10
}
let person2 :numberOrStringType = 'keynene'
let person3 :numberOrStringType = 10

///////////////

/* Interface */
//Interface정의
interface personInterface {  //자료형 자체를 선언하는 느낌
  name :string,
  age :number
}

//Interface사용
let person4 :personInterface = {
  name :'keynene',
  age :10
}

두 가지 방법 다 사용목적이 같으므로 기본문법은 비슷하다.
그러나 type은 변수 안에 타입에 대한 정보를 대입해서 저장해놓는 개념이고,
interface는 자료형 자체를 선언하는 개념이다.

여기서 의문점이 들텐데, 그렇다.
interface는 이름에서도 느껴지듯이 객체의 타입에 대한 정보만 정의할 수 있다.
이 점이 typeinterface의 가장 큰 차이점이고 이 부분에 대해서는 아래 "공통점 및 차이점"에서 다루도록 하겠다.


📝타입확장

/* Type */
type peopleType = {
  name :string,
  age :number,
}

// Type확장 :: &연산자
type weightType = peopleType & {  //& 연산자로 확장
  weight :number
}

//////////////////

/* Interface */
interface peopleInterface {
  name :string,
  age :number,
}

// Interface확장 1 :: extends
interface weightInterface extends peopleInterface { //extends로 확장
  weight :number
}

// Interface확장 2 :: 그냥 새로 선언
interface peopleInterface { //똑같은 이름으로 선언해버리면 자동으로 확장됨
  weight :number 
}

확장하는 방법이 살짝 다르지만, 미리 정의한 타입을 확장한다는 개념은 아주 비슷하다.




type vs interface 공통점 및 차이점

공통점

  1. 위와 같이 타입을 정의해서 사용할 때는 차이가 없다. (단, 객체와 함수만)

  2. 제네릭을 사용할 수 있다.
    제네릭이란 👉🏻 자바 [JAVA] - 제네릭(Generic)의 이해

  3. 타입 확장이 가능하다.


차이점

  1. type은 같은 이름으로 확장할 수 없지만, interface는 같은 이름으로의 확장이 가능하다.
    (type은 같은 이름으로 확장하면 오류가 난다.)

  2. type은 number, string, array 와 같은 자료형에 대한 타입도 정의할 수 있지만, interface는 오로지 object 타입만 정의할 수 있다.

  3. type은 union type, intersection type으로 정의할 수 있지만, interface는 불가능하다.




그럼 Type과 Interface는 각각 언제 사용해야 할까?

Type

  1. number, string, arrray와 같은 자료형에 대한 타입을 정의해야 하는 경우

  2. Union type, Intersection type을 정의해야 하는 경우 (사용자 정의가 필요한 경우)


Interface

  1. object의 타입을 정의해야 하는 경우
    (일단 interface 용어 자체가 object및 class와 친숙하고, 공식문서에서도 해당 타입은 type보다는 interface를 권장하고 있다.)

  2. 같은이름의로의 확장이 필요한 경우

  3. 라이브러리를 만든다던가 API에 대한 타입을 정의해야 하는 경우




📚 Type VS Interface

일반적으로 객체에 대한 타입을 정의할 때는 interface를 쓰는 것을 지향하지만, 복잡한 타입을 정의하기 위해 type을 사용하는 경우도 있다.
위와 같은 특징들을 고려해서 개발자 또는 팀의 선호도에 따라 선택하는 것이 좋다.

profile
keynene

0개의 댓글

관련 채용 정보