TypeScript 기초

# TypeScript의 정의

타입스크립트는 프로그래밍 언어이다.

JavaScript는 Interpreted 언어인 반면에, TypeScript는 Compiled 언어이다.

결국 TypeScript로 개발된 소스의 경우 Compile(Build?)이라는 단계를 거쳐, JS라는 결과물을 생성한다.

실질적으로 앱을 동작시키는 언어는 Compile 결과물로 생성된 JS라고 볼 수 있다.

 

# Why TypeScript인가?

JavaScript는 개발할 경우에, 타입에 대해서 자유롭지만, TypeScript는 정적타입언어로써, 타입을 명확하게 정의한다.

TypeScript는 타입을 미리 정의하기 때문에, 개발 초기에 타입으로 인한 문제를 대부분 잡아낼 수 있다는 장점이 있다.

 

Tip. 정적타입언어 vs 동적타입언어

- 정적타입언어 : string, int

- 동적타입언어 : var(scope가 함수 단위), let(scope가 block단위)

 

# 개발환경구축

- node.js : typescript complier 모듈을 npm에서 제공하기 때문에, 설치가 필수적이다.

- browser : 클라이언트에 해당하므로, 당연히 필요하다.

- npm i(nstall) typescript -g // -g 옵션을 사용하여, typescript cli?를 광역으로 설치한다.

- tsc --init //초기 TypeScript 프로젝트를 생성한다. tsconfig.js가 생성된다.

 

# TypeScript 파일(.ts) Compile하기

- tsc (xxx.ts 파일 경로) //개별 .ts 파일을 컴파일할 경우

- cd projectFolder //해당 폴더에 ts.config 파일이 존재할 경우, 모든 .ts 파일에 대하여 Compile 수행, 결과물은 OutputPath에 저장되려나?

tsc

- tsc -w              //-w 옵션을 추가로 붙여주면, watch 모드가 활성화되어, .ts 파일이 변경*저장될 때마다, 새롭게 Compile하여, 결과화면에 반영되게 한다.

- ./node_modules/.bin/tsc //tsc를 광역으로 설치하지 않았을 경우, 이렇게 실행한다.

 

Tip. 기본적인 node 사용법

npm init -y //package.json을 생성하고, node.js를 사용하는 프로젝트 기본 폴더를 생성한다.

npm i typescript@2.2.0 -g //@로 version을 지정할 수 있음, -g 파라미터로 어디서나 해당 모듈을 사용할 수 있게 함

 

 

Tip. 설치하면 좋은 Node.js Module

- nvm(node.js version manager : node.js의 버전을 자유롭게 설치, 변경이 가능)

nvm install 6.10.2   : 6.10.2 버전의 node.js 버전을 새로 설치

nvm use 6.10.3      : 설치된 6.10.3 버전의 node.js를 사용

 

Tip. 상세 참고 정보

- node.js : Chrome의 V8 Javascript Engine을 사용하여, JS를 해석하고, OS 레벨에서의 API를 제공하는 Server-Side JS 런타임 환경 제공

- browser : JS를 해석하고, DOM을 제어할 수 있는 JS 런타임 환경 제공

 

# tsconfig.js에 관하여

해당 파일은 현재 프로젝트에 대하여 TypeScript파일(.ts)들을 어떻게 컴파일할 것인지를 정의하는 파일이다.

일반적으로 어떤 대상의 .ts 파일을 컴파일할 것이며, 어떤 js 파일 형식으로 결과를 만들 것인지를 정의한다.

 

# Compiler Options

tsconfig.js 파일을 수정함으로써, TypeScript 파일에 대한 Compile 옵션을 설정할 수 있다.

{
"compileOnSave": true, //파일을 저장할 경우, 자동 compile?
// "files": [],           //[]이 아닐 경우, 모든 .ts, .tsx, .tsd, .ts 파일 컴파일됨, 상대,절대경로 리스트 배열
// "include": [],         //확장자 *.ts
// "exclude": [],         //특정폴더 제외
"compilerOptions": {
  // "types": [],                              //기본적으로, ./node_modules/@types 안의 타입
  //target : 어떤 JS로 변환시킬 것인가?
  "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
  // "lib" : [], lib를 지정하지 않으면 target이 es5일경우, dom, es5, scriptehost를 helper로 지원(.찍으면 definition이 연동됨)
  // target이 es6이면, es6가 default, es6가 아니면 commonjs가 default
  // 컴파일 된 모듈의 결과물을 어떤 모듈 시스템으로 할지를 결정
  "module": "commonjs",                     
  /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
  // "outDir": "./",                        /* Redirect output structure to the directory. */
  
  /* Strict Type-Checking Options */
  "strict": true,                           /* Enable all strict type-checking options. */
  }
}

 

# IDE의 활용

기본적으로 Visual Studio Code는 Typescript로 구현되었고, TypeScript Compiler를 지원한다.

IDE의 최우측 최하단을 클릭하면, Use VSCode Version / Use Workspace Version을 선택하여 사용가능하도록 되어있다.

npm install tslint : 해당 NodeModule은 코드 컨벤션을 체크해준다. 이것과 더불어 IDE에서도 Extension을 설치해주어야 한다.

ext install tslint // Visual Studio Code Extension 상에서 설치하고, 활성화해주어야 함