[React] 왜 TypeScript?? 그리고 interface VS type

 

안녕하세요. 웹 배영경입니다.

이번 시간에는 타입스크립트를 쓰는 이유와 interface와 type의 차이점에 대해 알아보았습니다!

 

타입스크립트와 자바스크립트 비교

우선, 타입스크립트와 자바스크립트의 가장 큰 차이는 타입스크립트는 정적 타입 언어이고, 자바스크립트는 동적 타입 언어라는 것.

 

Type의 유무

자바스크립트의 가장 큰 장점이자 단점은 변수나 객체의 타입을 지정하지 않는다는 점.

타입스크립트는 이름에서부터 알 수 있듯이, 타입을 지정해줘야 한다는 점.

 

타입의 유무가 가장 먼저 떠올릴 수 있는 차이겠죠???

 

자바스크립트에서 타입을 지정해주지 않는 점이 편리하다고 생각할 수 있지만,

자바스크립트가 동작하면서 자신도 모르게 형변환이 된다던지, 예기치 못한 버그가 발생할 수 있다는 문제가 있다.

 

타입스크립트를 사용함으로써 이런 문제를 미리 예방할 수 있다.

 

인터프리터 언어 vs 컴파일 언어

아마 이 컴파일 방식의 차이가 가장 많이 떠올리는 주된 차이점 인 것 같은데요~

 

자바스크립트는 인터프리터 언어,  타입스크립트는 컴파일 언어입니다.

 

인터프리터 언어는 컴파일 과정이 없기 때문에 에러를 출력하지 않고 실행이 된다.

따라서 런타임 중 런타임 에러를 발생시킬 수 있다.

 

하지만 컴파일 언어의 경우 컴파일 단계에서 타입 관련 에러를 막을 수 있다.

즉, 컴파일 에러가 발생하게 된다.

때문에 오류가 발생했을 때, 컴파일 오류가 발생하는 타입스크립트의 경우 보다 쉽게 오류를 발견하여 수정할 수 있다!

 

타입스크립트는 컴파일 언어이기 때문에 자바스크립트로 컴파일을 해주는 시간이 소요가 되어, 자바스크립트만을 독립적으로 사용했을 때 보다 속도 차이가 있을 수 있다.

 

이런 차이점/불편함을 실제로 겪은 적 있나요~?? 😟

리액트 프로젝트를 할 때 타입스크립트를 쓴 이유가 무엇인지,

자바스크립트와 타입스크립트의 차이점이 무엇인지를 이야기 하고 나서

"그렇다면 자바스크립트의 그런 불편함을 실제로 겪은 사례가 있는지"를 물어보는 경우가 있다는 이야기가 나와서 어떤 경우가 있을 수 있을지를 한번 생각해봤습니다ㅋㅋ.. 그만물어봐.....

 

예를 들어, D-day 계산기를 만들 때를 생각해보겠습니다.

날짜를 받아와 연산하는 과정에서 나도 모르는 사이 타입이 string으로 바뀔 수 있습니다. 

console.log(todayDate + inputValue);

 

오늘이 20일이고, inputValue로 2가 들어온다면 22일이 출력되길 바라겠죠!

하지만 inputValue의 type이 number가 될지를 보장해주지 않는다면 inputValue에 string type의 ‘2’ 이 들어올 수도 있습니다. 

todayDate: number와 inputValue: string이 만났을 때, 대부분의 언어는 타입이 맞지 않아 계산이 되지 않는 error를 반환하지만, JS는 숫자 20과 string ‘2’를 그대로 이어붙인 string type의 ‘202’를 반환하여 우리가 의도한 바와 달라질 수 있습니다..

 

JS가 알아서 형변환을 해버릴 때가 있기 때문에, 이처럼 JS는 실행해보기 전까지는 오류를 잡을 수가 없습니다. 심지어 에러가 나지도 않는 상황..!!

아주 큰 규모의 프로젝트가 되었을 때, 위와 같은 상황이 발생한다면, 또는 더 복잡한 상황이 된다면..?

에러가 어느 위치에서 어떤 이유로 발생했는지 가늠하기도 코드를 수정하기도 어렵게 되는 상황이 발생하게 됩니다..

 

---

 

이외에도 타입스크립트가 IDE 결합성이 좋고, 가독성이 높고, 협업 시 다른 사람의 코드를 파악하기에도 용이할 수 있는 등 차이점들이 존재합니다.

 

 

이제 이번 과제에 타입스크립트를 쓰면서 interface만 썼는데 type alias로도 지정해줄 수 있다는 걸 알게되어 좀더 자세히 살펴보도록 하겠습니다.

 

 

type과 interface의 차이

 

Primitive Types(원시 타입)

type WaveWeb = number;

원시 타입 number에 대한 별칭(alias)으로 WaveWeb이라는 type alias를 만들어낸 것을 볼 수 있다.

 

그러나, interface는 number와 같은 원시 타입을 직접적으로 정의하는 용도로는 사용될 수 없다.

 

Union Types

type MyUnionType = number | string;

MyUnionType은 number 또는 string의 값을 가질 수 있는 타입으로 정의가 되어있다.

즉, type은 union type을 지정할 수 있다.

 

그러나, interface로는 union type을 직접적으로 표현하는 용도로도 사용되지 않는다.

 

Function Types

• type

type MyFunctionType = (arg1: number, arg2: string) => boolean;

 

• interface

interface MyFunctionInterface {
  (arg1: number, arg2: string): boolean;
}

 

 

Declaration Merging(선언 병합)

interface Person {
  name: string;
}

interface Person {
  age: number;
}

TypeScript는 이 두 Person interface를 name과 age 속성을 모두 가진 하나의 interface로 자동 병합해준다.

 

반면, type alias는 선언 병합을 지원하지 않는다.

만약 같은 이름의 type을 여러개 정의한 경우 TypeScript에서는 에러를 응답한다.

 

Intersection  vs  Extends

type AB = A & { propB: string; }

AB타입을 생성할 때, intersection 기호(&)를 사용하여 A의 기존 속성들이 새로운 propB 속성과 함께 결합한다는 것을 의미한다.

 

interface A { propA: number; }
interface B extends A { propB: string; }

interface B는 A로부터 propA 속성을 상속하고 A에는 없던 새로운 속성인 propB를 추가하여 확장한다.

 

 

Type vs Interface

• Interface
  
  • 기존의 구조를 결합하거나 수정해야 할 때
  • 특정 라이브러리를 사용하거나 새로운 라이브러리를 만들 때 좋은 선택지가 될 수 있다
  • 기존 코드를 더 쉽게 만들면서 선언한 것들을 병합하거나 확장하기에 용이
  • OOP의 관점에서 가독성이 좋은 코드를 만들 수 있음

---

type과 interface를 선호에 따라 둘 다 사용할 수 있는 경우들이 존재하는데, 다음 상황들에서는 type alias를 사용하는게 더 좋을 수 있다.

• Type
  • 조건부 타입(conditional type), 제네릭 타입(generic), 타입 가드(type guard) 등등의 더욱 심화된 도구들을 제공
  • 기본 데이터 타입에 대해 새로운 이름을 붙이고 싶을 때
  • union, tuple, function과 같은 더 복잡한 타입을 정의할 때
  • 함수를 재정의(overload)할 때
  • mapped type, conditional type, type guard처럼 고도된 기능을 사용할 때

 

 

Type은 일반적으로 더 유연하고 표현이 쉽다.

Type이 interface는 주지 못하는 더 넓은 범위의 심화 기능을 제공하고, TypeScript가 더 TypeScript스럽게 다양한 기능을 확장하도록 해준다.

또한 Type alias를 사용하여 object type에 대한 자동으로 getter 메서드를 생성할 수 있지만 interface는 그렇지 못하다.
mapped type, template literal, 'keyof' 연산자를 사용하여 어떠한 object type에 대한 getter 메서드든 자동으로 다 만들어낼 수 있다.

 

 

functional programming 패러다임과 잘 어울리기 때문에 많은 개발자들이 type을 선호한다고 한다.

TypeScript의 type expression의 풍부함은 코드 상의 type 안전성을 유지하면서 composition과 immutability와 같은 함수형 개념들이 더 잘 작동하도록 도와준다.

 

---

 

 

type이 이렇게 많은 기능을 제공하는줄 몰라서 좀 놀라웠다..

getter나 복잡한 타입을 아직 정의해 볼 일이 없어서 완전히 와닿진 않지만, 차차 type과 interface의 차이를 제대로 느낄 수 있게 되길!!

 

 

참고 아티클 :

https://cdragon.tistory.com/entry/TypeScript-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-interface-vs-type