[Typescript] why Typescript?

개요

• 자바스크립트와 타입스크립트란?
• 타입스크립트를 선택한 이유
• 착각하기 쉬운 타입스크립트

---

기본개념

Javascript)

동적 웹페이지를 만들기 위한 프로그래밍 언어로써 웹페이지를 조작하고, 서버와 클라이언트 간 상호작용에 관한 일을 한다.

• 등장배경 : 정적인 초기웹사이트에서 동적으로 변함에 따라 등장하게 되었다
• 인터프리터 언어이지만 컴파일러가 내장되어 있어 실행 속도가 매우 빠르다.
• 객체기반의 스크립트 언어이지만 함수형과 객체 지향형 프로그밍을 모두 구현할 수 있다,

Typescript)

Javascript를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어

• 컴파일 언어, 정적 타입 언어 : 동적인 Javascript는 런타임에서 오류를 발견할 수 있는 것에 반해 Typescript는 코드의 작성 단계에서 타입을 체크해 오류를 확인 할 수 있다. 
• 컴파일러 또는 바벨을 통해 자바스크립트 코드로 변환된다.
• 타입을 결정해주는 코드로 인해 번거롭고 코드량이 증가하며 컴파일 시간이 오래걸린다. 하지만 실행속도는 빠르다
• Javascript 기본문법에 Typescript 문법을 추가한 Javascript Superset이다
• 객체 지향 프로그래밍을 지원한다.

---

왜 선택해야하는가?

높은 수준의 코드 탐색과 디버깅)

• 타입을 지정하고 목적을 뚜렷하게 하여 타입에 맞지 않는 변수나 함수는 사전에 제거한다.
• 컴파일 단계에서의 에러 처리는 손쉬운 디버깅이 가능하다.

높은 생산성)

• Javascript의 경우 함수의 매개변수나 데이터로 오는 값이 무엇인지 알기 위해서는 여러 파일을 살펴봐야했지만 Typescript는 그에 관한 정보를 자동으로 리스트업해주어서 개발자가 직관적으로 확인할 수 있다.

 

단점을 극복해보자) 

• 초기세팅의 어려움
  • 기본적으로 모듈과 컴파일을 위한 옵션을 설치하는 등 여러과정이 추가적으로 필요하지만 CRA, CLI 같은 초기 세팅 도구를 활용한다면 보다 쉽게 사용할 수 있다
• 생산성 저하
  • 간단한 코드까지도 타입을 지정해야하기에 번거로움과 Javascript대비 코드량이 증가하기에 실제 개발시간이 더 걸릴 수 있다 하지만 이는 Typescript가 익숙해진다면 위에서 나온 높은 생산성으로 이어질 수 있다.

---

알고 가자 Typescript

 

제네릭)

선언시점이 아닌 생성 시점에 타입을 명시하여 다양한 타입을 사용할 수 있게 하는 기법이다
컴포넌트 뿐만아니라 함수에도 사용할 수 있다.

function logText <T> (text: T):T {
 return text;
}

logText<string>('aa');
logText<number>(100);

 

 

type VS interface)

결론을 먼저 말하자면 무엇이 더 낫다가 아닌 어느 상황에 어느 것이 낫냐의 차이가 될 것 같다.

 

interface a {
  ...
}
interface b extends a {
  ...
}

type a = {
  ...
}

type b = a & {
  ...
}

딱 봤을 때는 interface가 좀 더 익숙한데 짧은 건 type이다. 난 익숙한 게 더 좋으니 interface 승!

좀 깊게 들어가보자!

확장하는 과정에서 두개의 객체들이 각자 겹치는 값을 가지고 있을 때 어떻게 행동할까? (블로그 1 참고)

interface : omit을 사용해서 사용하지 않는다면 error를 발생한다.

type : 교집합으로 가장 작은 범위를 골라서 만들어 낸다

귀찮은 omit쓰기 싫으니깐 type 승!

 

interface는 객체에서만 사용가능한 반면 type은 computed value 사용이 가능하다

type names = 'firstName' | 'lastName'

 

 

type은 선언된 타입을 재 선언시 오류가 나지만 interface는 객체에 더하여 확장(interface 병합)한다.

의도치 않은 에러가 발생할 수 있으니 type 승

 

장난으로 승, 패를 나누어 보았지만 이러한 차이점을 가지고 있느니 객체만 사용한다면 interface를 사용하는 것이 좀 더 효율적일 수 도 있다. 때에 따라 잘 활용해보자.

 

 

 

 

 

 

 

 

참고자료 : Article , 블로그1