[UniLetter] TypeScript Project Setup

1. Web Storm 에서 New Project 생성

2. package.json 파일 생성

npm init

Press ^C at any time to quit.
package name: (inu-events-server)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\selen\WebstormProjects\inu-events-server\package.json:

{
  "name": "inu-events-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

3. typescript 설치

npm i typescript -g

pakage.json

  "dependencies": {
    "typescript": "^4.5.4"
  }

4. ts-node 설치

typescript 를 Node.js 상에서 실행할 수 있도록 함

npm i ts-node --save-dev

package.json

  "devDependencies": {
    "ts-node": "^10.4.0"
  }

5. gitignore

./nodemodules 를 ignore 함

6. tsconfig.json 생성

tsc --init

하려는데 아래와 같은 오류가 남!

> 오류 해결

power shell 을 관리자 권한으로 들어가서
Set-ExecutionPolicy Unrestricted

tsc --init 성공!

PS C:\Users\selen\WebstormProjects\inu-events-server> tsc --init

Created a new tsconfig.json with:                                                      
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true

tsconfig.json 생성됨!

7. tsconfig 속성 변경

• 소스맵 생성
• typescript 컴파일 결과의 Javascript 파일들이 dist 폴더에 생성될 것임

    "sourceMap": true,
     /* Create source map files for emitted JavaScript files. */

    "outDir": "./dist",
     /* Specify an output folder for all emitted files. */

8. test 파일 컴파일

• test 파일 작성

  src/index.ts

  const test = 'Init test';
  
  export function hello(word: string = test): string {
      return `Hello AppCenter!  ${test}! `;
  }

• tsc 명령어로 컴파일 하면 js파일과 소스맵 생성됨
  

9. Watch mode

tsc -w
Watch mode로 시작하면 typescript 파일에 변화가 생길 때마다 다시 컴파일 해줌!

이건 잘 안쓰나봄..!

10. tslint

npm i tslint --g
tslint : typescript 코드 가독성 및 오류를 미리 검사하는 정적 분석 도구

tslint --init
tslint 시작