[Type Script] 타입 스크립트 정의, 프로젝트 생성
서론
프론트엔드 개발을 공부하면서 이것저것 많이 알아보다가 요즘은 Type Script를 많이 쓴다는 것을 알게 되었다.
그래서 이번 글은 React에서 벗어나 새로운 주제인 Type Script에 대해 적어볼 것이다.
편의상 자바스크립트는 js, 타입 스크립트는 ts로 줄여 말할 것임.
자바스크립트와 타입스크립트의 차이점
js는 동적 타이핑 dynamic typing을 지원하지만, ts는 정적 타이핑 static typing을 지원한다.
즉, js는 변수를 만들 때 변수의 타입을 지정하지 않아도 되고 변수를 선언 후 변수 타입을 변경해도 문제가 없다.
하지만 ts는 변수를 만들 때 변수의 타입을 꼭 지정해야 하고,
변수 선언 후 변수 타입을 변경하면 컴파일 오류가 발생한다.
자바스크립트가 더 좋은 거 아닌가요?
작은 프로젝트를 만들 땐, js는 편하고 생산성이 높다고 생각할 수 있지만
실무에선 타입을 엄격히 확인하고 컴파일 단계에서 모든 오류를 확인할 수 있는 ts가 훨씬 많이 쓰인다.
또한 타입스크립트가 ECMA스크립트 표준을 따르며 웹 브라우저보다 훨씬 빠르게 js 기능을 실행할 수 있다.
그리고 ts가 컴파일된 js 코드는 사람이 작성한 것처럼 보여 사람들이 읽기에도 쉽다.
타입스크립트 애플리케이션 개발 과정
ts 코드를 작성하고 애플리케이션을 배포하기까지 이 순서를 가진다.
ts 파일 (a.ts, b.ts, c.ts) --변환--> js 파일 (a.js, b.js, c.js) --통합--> 단일 js 파일 (main.js) --배포--> js 엔진
먼저 ts 파일을 js로 변환하고, 여러개의 파일을 하나로 묶고 통합하는 번들링 과정을 거친다.
그 다음 Node.js와 같은 js 엔진에서 실행된다.
번들 bundle : 여러 스크립트 파일을 하나로 통합하는 과정
+ ts 프로젝트에서 js 라이브러리도 함께 사용 가능하다.
타입스크립트 사용해보기
cmd 창에 node와 npm 버전을 확인해주고 typescipt를 install 해주자.
-g 플래그는 전역으로 설치함을 뜻함.
위 명령어로 ts 버전을 확인하자.
Vscode에서 main.ts를 생성하고 다음 코드를 적는다.
함수에 인자를 받을 때 number로 타입을 선언했다.
또, tsconfig.json 파일을 만들어 위와 같이 코드를 작성한다.
"outDir"을 생성된 js파일이 저장될 폴더를 지정하고, "noEmitOnError"이 true일 땐 모든 오류가 고쳐진 후에 js 파일이 생성된다.
또, "lib"로 dom, es6 라이브러리를 설치해야 console.log 같은 웹 API를 tsc가 인식할 수 있다.
그리고 터미널창에 tsc를 실행하면 dist 파일 안에 main.js가 생기는 걸 볼 수 있다.
담소
프로젝트를 생성할 때 공부하는 책에 충분한 설명이 없어서 구글링하느라 좀 시간을 보냈는데
해결하고 나니 이 뿌듯함! 이 맛에 코딩하지
무튼 타입스크립트 공부를 시작했다. 얼른 더 공부하고 싶다!