[TIL][TypeScript] 타입스크립트

타입스크립트 init

오늘은 주말을 맞아 그동안 궁금했던 타입스크립트를 혀로 살짝만 찍어먹어 보았다.
어떠한 지식이 없는 상태에서 일단 시작해 보자는 생각으로 맛만 한번 보자는 생각으로 튜토리얼을 찾아 시작해 보았다.

국룰 기본셋팅...

---

타입스크립트의 설치

타입스크립트는 공식문서
https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html
에 나와있듯 npm을 이용해 설치할 수 있다.
npm install typescript 또는 npm install -g typescript 을 사용하여 로컬 또는 글로벌로 설치할 수 있는데 나는 계속해서 사용해볼 생각이기에 글로벌로 설치하였다! (로컬로 설치 시 --save-dev / --save 잘 구분하자!)
타입스크립트는 자바스크립트의 수퍼셋 언어이자 타입스크립트를 자바스크립트로 컴파일 시켜주는 컴파일러 이다.
그래서 이 때 설치되는 typescript는 바로 컴파일러다! 정상적인 설치가 완료되면 터미널에서 tsc 커맨드를 사용 가능하다.

타입스크립트의 시작

타입스크립트를 사용 할 프로젝트를 열고 app.ts 로 새로운 파일을 생성해 주었다!

이때 평소처럼 npm init 이후 tsc --init 을 터미널에 입력해주면 tsconfig.json 이라는 타입스크립트 설정 파일이 생긴다!

대충 이런 ..... 내용들이 나오는데 타입스크립트는 V8 엔진이 인식을 못하기 때문에 자바스크립트로 컴파일 하여 사용하여야 한다!! 그때, 컴파일 옵션을 설정해 주는 곳이다.
다른 것은 모르겠고

• target 은 ECMA Script 버전을 지정해주는 곳이다. 위 스샷처럼 es5로 해놨다가 (기본 셋팅 이더라)
  ES6 문법인 리터럴 템플릿을 사용했는데 컴파일 시에 ES5 버전 JS로 강제로 컴파일되어 엄청난 아스키코드의 향연이 펼쳐졌다. (다행히 정상 작동은 되었다...)

• module 의 경우는 AMD / commonJS 모듈 등 범용적인 사용을 위해 존재하는 설정인데, 이 개념에 대해서는 알게된지 얼마 되지 않아서 추후에 업데이트 하겠다.

추가로 결과를 확인할 간단한 html도 만들어 주었다.
이렇게 되면 이제 코딩을 해볼 수 있는데, h1 태그에 간단하게 글자만 올려보려 한다.

타입스크립트 맛보기

타입스크립트는 간단히 말해 모든것에 사사건건 타입을 지정해 주어야 한다. 그렇지 않으면 에러가 발생하는데..
단 저 네줄 작성하는데 변수 선언부분에서 타입을 지정해주지 않아서 에러가 발생했는데, 이유를 찾는데 시간을 버렸다..

지정해준 타입 이외의 것이 들어오거나 나가면 바로 에러는 내보내준다.

저렇게 작성한 타입스크립트 파일은 바로 사용할 수 없다. 위에서 말했지만 컴파일링을 해줘야 하는데
tsc app.ts 이렇게 간단하게 입력해주면 컴파일링을 진행하며 설정파일에서 지정해준 ES버전으로 컴파일 해 준다!

그러면 자동으로 컴파일된 JS파일이 생성된다.... 이때만 해도 ECMA Script 버전을 지정해 줘야 한다는것을 모르고 진행해서 템플릿 리터럴이 적용이 안되었다..
(그런데 설정을 ES2018로 수정 후 컴파일해도 템플릿 리터럴이 적용이 안된다.. 이 부분은 더 알아봐야 겠다!)

그런데, ts 파일을 수정해줄때 마다 계속해서 컴파일을 해 주어야 js파일이 업데이트 되는데, 이 부분을 시원하게 긁어줄 기능이 기본적으로 탑재되어 있다.
tsc -w app.js 이렇게 -w (watch의 앞글자 라는데 계속 주시하겠다는 뜻이란다..)
을 붙여주면 마치 node.js의 nodemon 을 사용한것 처럼 ts파일을 저장할때 마다 자동으로 js파일도 리프레쉬 해준다!

맛보기 후기..

머리좀 식힐겸 잠깐 발가락만 담궛다가 빼 봤는데 새로운 기술, 지식을 접하는것은 늘 즐겁다. 계속해서 공부하고 현업에서도 요구하는 기술이라 시간 날때마다 조금씩 해볼것 같다! 발가락만 담궈봐서 재밌는건가..?