TS, 타입과 인터페이스

타입스크립트 사용하는 이유(장점)

버그를 예방할 수 있는 강력한 타입

TS를 사용하는 가장 큰 이유는 언어의 이름에서 알 수 있듯  '타입'(자료형) 때문

TS는 정적 타입 기반으로 컴파일을 하는 과정에서 타입을 결정하게 됨

컴파일 과정에서 타입을 지정하기 때문에 컴파일 에러를 예방할 수 있을 뿐만 아니라 손쉬운 디버깅이 가능해짐

높은 생산성

JS로 코드를 작성할때 값이 무엇인지 알기 위해 여러 파일을 살펴야 하지만 TS를 사용하면 변수의 이름뿐만 아니라 데이터의 자료형까지 알수 있음

개발자는 로직과 같은 큰 구조에 집중할 수 있으며 객체 안의 필드값을 다 기억할 필요 없이 IDE가 자동으로 리스트 업을 해주기 때문에 생산성에도 큰 기여를 함

호환성

TS는 JS의 슈퍼 셋(특정한 언어의 모든 기능을 포함하면서 다른 기능까지 활용 가능하도록 확장하는 것)

TS를 적용하는 경우 기존의 JS로 짜인 코드에 확장하는 식으로 대규모 수정 없이도 TS 적용이 가능함

 

타입스크립트 단점

초기 세팅의 어려움

TS는 독자적인 언어가 아니기 때문에 기존의 JS 엔진에서 실행됨

이를 위해 기본적으로 설치해야 하는 모듈들이 있고 컴파일을 하기 위한 옵션들도 설정해야함

이를 보완하기 위해 CRA 등의 초기 세팅 도구를 활용할 수 있음

이런 도구들은 TS를 기본적으로 지원하고 프로젝트 구조와 컴파일 옵션을 자동으로 설정해 주어 보다 편리하게 사용할 수 있음

타입 지정으로 인한 생산성 저하

매번 타입을 지정해줘야 하는 번거로움과 타입 어노테이션으로 인한 타입 에러로 실제 개발보다 타입을 지정하는데 시간을 더 할애할 수 있기 때문에 TS가 익숙하지 않은 개발자는 생산성이 낮아질 수 있음

또한 TS에서 제공하는 interface, class 등에 매번 변수명을 지정하면서 길어지는 변수명과 관리 포인트가 늘어나기 때문에 TS의 사용이 익숙하지 않은 개발자일 경우 생산성이 저하될 수 있음

 

타입과 인터페이스의 차이

타입을 정의하는 2가지 방법이 있는데 type alias을 사용하는 것과 interface를 사용하는 것

type alias는 interface가 하는 것을 거의 다 대체할 수 있는 것처럼 보임

interface Person = {
	name: string;
	age: number;
}

interface Person extends

 

똑같은 타입을 type alias를 활용해서 똑같이 만들 수 있음

 

type Person = {
  name: string;
  age: number;
};

 

type alias와 interface의 정의

둘다 타입에 이름을 부여해주는 것이지만 type alias는 모든(any) 타입에 이름을 달아줄 수 있지만 interface는 오직 객체 타입에만 가능함 

 

type alias와 interface의 차이

interface의 대부분의 기능들은 type에서도 가능하고 중요한 차이점이라고 한다면 type alias는 새로운 프로퍼티에 열려있지 않다는 것이고 interface는 항상 열려있다는 점

 

interface Window{
   title: string
}

interface Window{
   ts: TypeScriptAPI
}

const src = const a = "Hello Wrold";
window.ts.transpileModule(src, {});

interface의 경우 확장 가능(선언 병합)

예시를 보면 Window라는 타입을 선언한 후 다른 프로퍼티를 가진 Window 타입을 선언해주어도 에러가 나지 않고 나중에 선언된 타입의 프로퍼티를 가지고 있음

 

type Window = {
   title: string
}

type Window = {
   ts: TypeScriptAPI
}

//Error: Duplicate identifier 'Window'

type alias의 예시를 보면 Window가 중복된다라는 에러가 발생함

즉 type은 새로운 프로퍼티를 추가할 수 없음

 

type alias와 interface 사용

typescript 개발자들이 두 가지 방법을 모두 제공했다는 것은 각각 필요하기 때문에 만들 것이라고 추론이 가능함

 type alias의 경우는 타입의 속성들이 추후에 추가될 수 있으면 계속 타입이 변할 수도 있다는 생각을 하면서 개발을 해야함(변수 선언을 할때 const를 활용하여 상수로 선언해주는게 좋은 맥락)

 

interface를 활용하면 선언 병합(Declaration merging)이 가능함

기존에 선언된 타입을 확장해서 다른 속성을 추가로 선언할 수 있는 것

 

interface Person {
  name: string;
}

interface Person {
  age: number;
}

const user: Person = {
  name: 'al-bur',
  age: 21,
};

 

그래서 interface는 라이브러리를 사용하는 상황에서 추가적으로 타입의 속성들을 선언할대 유용함

 

// @emotion/react/types
export interface Theme {}

// emotion.d.ts
import '@emotion/react';

declare module '@emotion/react' {
  export interface Theme {
    colors: typeof Colors;
  }
}

emotion의 types를 보면 interface 키워드를 통해 Theme이라는 타입을 제공해줌

emotion 라이브러리를 사용할때 해당 타입에 선언 병합을 활용해 본인들이 원하는 속성들을 선언해 사용해줄 수 있음