TypeScript[1] - 설치,tsconfig.json

- TypeScript

---

-    컴파일하면 JavaScript가 되는 언어이며, 컴파일 시점에 타입 체크를 하여 객체 지향적인 문법을 추가할수 있는 특징을 가지는 언어

JavaScript가 대세긴 대세가 보다. back-end, front-end 를 왔다갔다 하면서 개발을 할수 있는 언어이면서도 그것의 단점을 보완하기 위해 이러한 컴파일 언어가 생겨나다니..

밑에 그림은 언어관계를 보여주는 다이어그램이다. 

ES5는 일반적으로 JavaScript 라고 생각하면 된다. ES6(ESC2015) 는 JavaScript 의 차기버전으로써 프로토타입 기반의 OOP라고 불리는 JavaScript 에 Class 기능을 도입하여 좀더 강력한 언어가 되었고 추가로 비동기 방식을 종합적을 처리할 수 있게 Promise 함수를 제공하는 등 버젼이 한단계 올라간 언어이다.

ES6을 다시 감싸주는 TypeScript, JavaScript 의 수퍼셋이라고 불리는 그는 과연 어떤 장점을 가지고 있을까?ㄷㄷ 기대된다.

- TypeScript 설치

---

무작정 설치부터 시작해본다.

기본적으로 node.js 를 설치했다는 가정하에 설치순서를 적어보겠다.

1. $mkdir 폴더명           - 새로운 폴더생성.

2. $npm init -y             - package.json 생성.

3. $npm i typescript -g   - 전역으로 typescript 모듈 설치

특정 ts파일을 컴파일하기 위해  4. $tsc 파일명.ts                - 에러 없이 실행될시 컴파일이 잘된것이다.

이제 해당 경로의 모든 ts 파일들을 컴파일 할수 있게 해보자.  5. $tsc --init                  - tsconfig.json 생성 Successfully created a tsconfig.json file 라고 나왔을시 성공

6. $tsc                         - ts 파일들을 컴파일 하겠다는 명령어이다. 에러없이 실행될시 컴파일 된것이다.

7. $node 파일명

간단한 ts 파일 예제로 따라해보는걸 추천한다.

<Test.ts>

class Test{
    constructor(){
    console.log("Test");
}
}
new Test();

- tsconfig.json

tsconfig.json 을 생성시 다양한 옵션들이 주석처리되었다.. 이걸 다 알기에는 너무 산으로 가는거 같다는 생각에 지금 진행중인 프로젝트의 json 파일을 가지고 왔다.

<tsconfig.json> 

{
  "compilerOptions": {
    "target": "es6", //빌드 결과물을 es6 방식을 한다는 뜻
    "module": "commonjs", // 빌과의 모듈 방식을 commonjs 방식을 한다는 뜻
    "moduleResolution": "node",//모듈 해석 방식은 node 처럼 한다는 뜻
    "sourceMap": true, // .map.js 파일도 함께 생성한다는 뜻
    "emitDecoratorMetadata": true, /* Enables experimental support for ES7 decorators. */
    "experimentalDecorators": true,  /* Enables experimental support for emitting type metadata for decorators. */
    "removeComments": false, /* Do not emit comments to output. */
    "noImplicitAny": false // 암시적으로 선언되었는데 any로 추론되면 에러를 알려준다.
  },
  "exclude": [ // npm 으로 설치한 모듈들을 import 가능하도록 설정
    "node_modules"
  ]
}

IDE 는 webstorm 을 추천한다 . 학생이면 학생용으로 무료 사용 가능하며 홈페이지에 다운로드 가능하다. 

https://www.jetbrains.com/webstorm/