# 1. TypeScript ###### tags: `지호`, `TypeScript Essentials` <br/> ## 1. TypeScript란 무엇인가 ### 특징 - 타입을 추가해서 자바스크립트를 확장 - 자바스크립트를 이해함으로써, **코드를 실제로 실행하기 전에** 에러를 잡아줌 - 전통적인 컴파일 언어(c++, java..)와 다르게, 인터프리터 언어인 순수 자바스크립트로 transpile하는 언어 ### Typescript Compiler ![그림10](https://user-images.githubusercontent.com/24283401/159443868-0a11764d-1292-4854-8691-bd08065375d1.png) <br/> ## 2. Typescript 설치 및 사용 ### 자바스크립트 실행 환경 - node.js - 크롬 브라우저의 V8 엔진을 이용하여 자바스크립트를 해석하고 API 제공 - 서버사이드 용 - LTS 버전 설치 - 노드 버전 관리: nvm, n - browser - 대표적인 자바스크립트 런타임 환경 - DOM 제어 가능 ### 타입스크립트 컴파일러 - 글로벌로 타입스크립트 설치 ```shell= npm i typescript -g # 타입스크립트 설치 node_modules/.bin/tsc # 타입스크립트 실행 폴더 tsc source.ts # 타입스크립트 컴파일러를 실행하여, 해당 파일을 자바스크립트로 변환한 파일이 생성됨 tsc --init # 프로젝트에 타입스크립트 설정 파일인 tsconfig.json 파일 생성 tsc -w # 파일이 수정됐을 때마다 새로 컴파일이 됨 (watch 모드) ``` - 프로젝트에 타입스크립트 설치 ```shell= npm uninstall typescript -g # 글로벌로 설치된 타입스크립트 제거 npm init -y # npm 프로젝트 초기화 npm i typescript # 프로젝트에 타입스크립트 설치 -> node_modules/typescript npm i typescript -D # 런타임에 필요하지 않기 때문에 devDependency로 추가 npx tsc --init # node_modules/typescript/.bin/tsc 를 이용하여 프로젝트에 tsconfig.json 파일 생성 npx tsc -w # 위와 동일 npm run build # package.json에 script에 "build" : "tsc" 로 수정하면 이 명령어를 사용하여 tsc 실행이 가능하다. npm run build:watch # 이 명령어도 사용 가능 ``` <br/> ## 3. Type Annotation 타입을 지정해준다. ```typescript= let a: number; ```