[Typescript] 대세로 떠오른 타입스크립트 첫걸음!

프론트엔드/Typescript

[Typescript] 대세로 떠오른 타입스크립트 첫걸음!

잡캐헨리 2022. 9. 5. 00:25

<본 내용은 개인작업을 통해 새롭게 알게된내용, 경험에 대한 메모장과 같은 글입니다>

기술 사용의 필요성

기존의 자바스크립트는 인터프리티드 동적타이핑 (dynamic typing) 언어이다. 컴파일 언어의 경우 컴파일 과정에서 오류를 발견할 수 있지만, 인터프리티드 언어의 특징으로 인터프리터를 통해 번역과정을 거치는 자바스크립트는 런타임에서야 오류를 발견할 수 있다 이 때문에 심각한 경우 배포단계에 되서야 오류가 발견될 수 도 있다.

무엇보다 문제는 동적타이핑 언어라는 특징에 있다. 자바스크립트는 다른 언어와 비교해봐도 독특한 타이핑 특성을 가지고있다 꽤나 유하게 타입추론을 진행하는데 이 때문에 자바스크립트 개발자를 조롱하는 밈 (meme)도 있을 정도이다.

기존 자바스크립트의 동적타이핑의 문제

아마 자바스크립트를 사용하는 개발자라면 위와같은 밈 을 한번쯤 본 적 있을 것이다. 자바스크립티의 타입추론(타입 추론이라기보단 형변환이다)은 후하다못해 예상치못한 오류를 야기할 정도이다. 다른 프로그래밍언어 라면 에러를 내뱉을 법한 것도 문제로 보지않고 어김없이 수행해낸다.

이는 생산성을 향상시키는 장점이 있지만, 대규모의 프로젝터에서는 예상치못한 오류를 발생시키고, 디버깅에 치명적인 문제가 될 수 있다.

Javascript의 Superset, Typescript

이에 대한 해답으로 타입스크립트를 사용할 수 있다. 타입스크립트는 자바스크립트에 타입(type)가 추가된 언어인데, 일부 브라우저를 제외한 브라우저 환경에서는 타입스크립트를 직접 실행할 수 없다. 때문에 타입스크립트로 작성한 파일은 자바스크립트로 컴파일 되는데 이 때문에 타입스크립트는 정적타이핑 트랜스파일(Transpile)언어라고 한다.

타입스크립트를 사용하면 타입문제를 컴파일 과정에서 잡아낼 수 있고, 이 덕분에 런타임에서 오류가 발생할 가능성을 크게 줄여 개발 안정성을 높여준다

자바스크립트 vs 타입스크립트 비교분석

동적타이핑 vs 정적타이핑

자바스크립트에 타입을 더한 타입스크립트는 Dynamic types 를 사용하는 Javascript 와 달리 Static Types을 사용하는 특징을 가지고 있다 자바스크립트는 런타임에 타입이 정해지는 것과 달리 타입스크립트는 런타임 아닌 개발중에 타입을 확인할 수 있다.

// JavaScript
function add(n1, n2) {
  if (typeof n1 !== 'number' || typeof n2 !== 'number') {
    throw new Error('Incorrect input!');
  }
  return n1 + n2;
}

// TypeScript
function add(n1: number, n2: number) {
  return n1 + n2;
}

타입 에러를 방지하는 방법의 차이

언뜻 보면 자바스크립트와 같은것 같으면서도 처음보는 생김새에 당황할 법도 하다. 만약 다른 프로그래밍 공부를 했다면 익숙할 수 도 있는 부분인데 가장 특이한 부분은 : 을 이용해서 타입을 지정해주는 것이다

타입스크립트는 이런식으로 개발단계에서 변수의 타입을 지정해줌으로써 타입으로 인해 발생할 수 있는 예상치 못한 에러를 잡아준다. (트랜스파일 언어이므로 지정한것과 다른 타입이 들어오게되면 컴파일단계에서 오류를 뱉음)

타이핑에서 오는 생산성의 차이

그렇다고 동적 타이핑이 단점투성이의 곧 사장될 기술은 아니다. 자바스크립트 특유의 동적타이핑 (타입추론) 덕분에 개발자는 타입에 대해 크게 신경쓰지않고 개발을 진행할 수 도 있다. 간단하고 규모가 작거나, 들어올 데이터가 명확하게 정해져있는 프로그램이나 웹사이트를 만든다는 등의 이유로 타입에 대해 신경 쓰지 않아도 되는 경우가 있으므로 이럴경우 자바스크립트의 타입추론은 생산성 향상에 큰 도움을 준다.

(타입스크립트를 이용해도 any타입을 쓴다던가 타입스크립트의 타입추론을 이용해 생산성을 향상할 수 있다. 다만 이렇게 사용하게된다면 타입스크립트를 사용하는 이유가 없게되는 것이다.)

티스토리