[typescript] 3. 개발 환경 구축 및 테스트 프로젝트

[typescript] 3. 개발 환경 구축 및 테스트 프로젝트

 

1. 필요 준비물 

  - node.js 

  - npm

  - typescript 

2. node.js 설치

  - https://nodejs.org/ko/download/ 에서 다운 받아서 설치

3. npm 설치

  - node.js 설치시 기본 적으로 설치가 됩니다.

  - 최신으로 업데이트만 해주시면 됩니다. 

  > node install -g npm@lastest

4. npm을 이용한 모듈 관리 방법 

  - npm은 node.js 에서 필요한 third party 모듈을 관리해 주는 매니저 입니다.

  - npm은 package.josn를 통해어 모듈을 관리합니다. 

  1) package.json만들기

     >npm init [-y 옵션시 기본 값으로 생성 된다]

항목	설명
package name	- 패키지 이름   - 기본 값 : package.json이 속한 디렉토리 이름
version	- 현재 패키지 버전 ( 시맨틱 버저닝 형식으로 작성, 메이저.마이너.패치 버전  - 기본 값 : 1.0.0
description	- 패키지 검색(npm search)로 패키지를 찾을때 표시될 패키지의 설명
entry point	- require 함수로 호출될 모듈의 자바스크립트 파일 이름을 입력한다.   - 기본 값 : index.js
test command	- 스크립트 명령을 입력 할 수 있다.
git repository	- 만들려는 패키지의 github 저장소가 있다면 해당 주소를 입력
keywords	- 패키지를 배포한 뒤 패키지 검색이 잘 되도록 관련 키워드를 한개 이상 입력한다.
author	- 패키지를 만든 제작자명을 입력 한다.
license	- 라이센서 종류를 입력한다.   - 기본 값 : ISC(internet Software Consortium)

  2) npm  주요 명령어 

    - [node.js] 3. npm 모듈 설치(윈도우 기준) 및 node.js 사용자 모듈 만들기 의 3번을 참조

5. typescript 설치 / 업데이트 / 삭제

  1) 설치 

    - [typescript] 1. 설치 를 참조 하세요.

  2) 업데이트

    >npm outdated -g typescript

  3) 삭제

    > npm uninstall -g typescript

    > npm cache clean

6. Hello World 프로젝트 만들기

  1) CMD에서 프로젝트 생성 하기

    - typescript는 tsconfig.json을 이용해서 프로젝트를 관리 한다고 볼수 있습니다.

    - 그래서 tsconfig.json을 만드는 것이 프로젝트를 만든다고 이해 하면 될 것 같습니다.

    (1) tsconfig.json 이란 ?

      - 타입스크립트를 컴파일 할 때 필요한 설정을 관리하는 파일 입니다.

      - command 창에서 tsc 만 입력하게 되면 기본적으로 tsconfig.json를 찾아서 설정을 읽어 들입니다.

        tsconfig.json 검색 경로는 "현재 경로 -> root 디렉토리 경로" 순으로  검색 합니다.

    (2) tsconfig.json 생성 하기

      > tsc --init

      - tsconfig.json 형식

      

{

"compilerOptions": {

/* Basic Options */

"target": "es5", // 컴파일 후 변환될 ECMA스크립트 버전

"module": "commonjs", // 모듈의 형식을 지정

"sourceMap": true, // 컴파일 후 map 파일의 생성 여부를 결정 한다.

map 파일은 컴파일과정에서 typescript와 javascript의 파일간

연결 정보를 가지고 있습니다.

"outDir": "./dist", // 컴파일 결과를 저장할 디렉토리를 지정합니다.

"outFile": "./out.js", // 여러개의 typescript파일을 컴파일을 거쳐 하나의 파일로 만들때

사용합니다.

"strict": true, // true이면 엄격한 타입 검사 모드를 활성화 한다.

"noImplicitAny": true, // any 타임으로 암묵적 형 변환 여부를 결정, 기본 : false

false : type을 지정하지 않으면 any 타입이 붙습니다

true : type을 지정하지 않으면 컴파일시 에러가 납니다.

"esModuleInterop": true // ECMA스크립트 모듈과 상호 운영성을 가능하게하는 속성으로

true이면 CommonJS모듈을 디폴트 모듈처럼 호출 할수 있다.

.... 많지만 생략

}

    (3) tsconfig.json 를 이용한 컴파일

      1-Ex) typescript 파일 합쳐 특정 디렉토리리(dist)에 결과를 남기기

        - 소스 코드

        

        - tsconfig.json

{

"compilerOptions": {

/* Basic Options */

"target": "es5",

//"module": "commonjs", outFile 옵션 사용시 commonjs는 사용 할수 없다

"sourceMap": true,

"outFile": "./dist/out.js",

/* Strict Type-Checking Options */

"strict": true,

"noImplicitAny": true,

/* Module Resolution Options */

"esModuleInterop": true

} ,

"files": [

"./hello.ts",

"./myname.ts",

"./doitnow.ts"

]

}

        - 실행 결과

          > tsc 로 바로 실행

          > dist 디렉토리 하위에 결과 파일 생성 및 실행 경과

      2-Ex) typscript 특정 디렉토리리(dist)에 결과를 남기기

        - 1-Ex)의 tsconfig만를 조금 수정 하여 사용 

{

"compilerOptions": {

/* Basic Options */

"target": "es5",

//"module": "commonjs", outFile 옵션 사용시 commonjs는 사용 할수 없다

"sourceMap": true,

//"outFile": "./dist/out.js",

"outDir": "./dist",

/* Strict Type-Checking Options */

"strict": true,

"noImplicitAny": true,

/* Module Resolution Options */

"esModuleInterop": true

} ,

"files": [

"./hello.ts",

"./myname.ts",

"./doitnow.ts"

]

}

        - 실행 결과

          > tsc 로 바로 실행

          > dist 디렉토리 하위에 개별 파일로 js 파일이 생성 됩니다.

  2) VSCode로 프로젝트 생성하기

    - VSCode에서는 빌드 작업을 자동화 하기 위해서 taskrunner를 사용합니다. 

    (1) taskrunner 란?

      - VSCode에서 실행 할 작업 단위를 관리 하는데 사용합니다.

      - tasks.json을 통해서 작업 할 단위를 관리 합니다.

    (2) tasksrunner 설정 방법 

      - 프로젝트 하위에 .vscode/tasks.json 을 추가해야 합니다

      - VSCode의 Configure Task를 사용하여 task.json을 생성 할수 있습니다.

      [1]. tsconfig.json 만들기

        - tsconfig.json이 존재 해야 VSCode는 현재 프로젝트가 typescript 프로젝트라고 인지하여 task.json을 

          자동으로 추가 할수 있게 하는 작업 목록을 제공합니다.

          > tsc --init

 

      [2]. Configure Task 선택

        - Ctrl + Shift + p -> Configure Task 선택

      [3]. tasks.json을 만들 설정을 선택

        - 2개의 설정이 존재 합니다. 

         >  tsc  감시 : watch 모드 상태에서 ts 파일이 변견될 때 만다 컴파일 합니다.

         >  tsc  빌드 : ts 파일을 바로 컴파일 합니다.

        - 저는 typescript-test 디렉토리를 빌드 할 것 이기 때문에 "tcs 빌드: typescript-test\tsconfig.json"를 선택 

          했습니다.

<디렉토리 구조>

<tasks.json을 만들 tsconfig.json 선택>

{

// See https://go.microsoft.com/fwlink/?LinkId=733558

// for the documentation about the tasks.json format

"version": "2.0.0",

"tasks": [ // 아래 항목 하나 하나를 개별 task로 본다.

{// 1번 tasks 빌드를 선택 했을 시 생성되는 내용

"type": "typescript",

"tsconfig": "typescript-test\\tsconfig.json",

"problemMatcher": [

"$tsc"

]

},

{// 2번 task 감시를 선택 했을 시 생성되는 내용

"type": "typescript",

"tsconfig": "typescript-test\\tsconfig.json",

"option": "watch",

"problemMatcher": [

"$tsc-watch"

]

}

]

}

      

    (3) tasksrunner 사용 예제

      [1] 테스트 코드 생성 

        - console.log('hello world')

      [2] hello.ts 를 tasksrunner를 사용하여 컴파일 해보기

        - 기본 터미널이 bash이면 오류 가 난다. power shell로 해야 합니다.

        - bash 일 경우 "\"에 대한 처리를 모하기 때문에 경로를 못 찾는다고 에러가 납니다.

          <error TS5058: The specified path does not exist:>

        - ctrl + shift + b -> tsc : 빌드 - typescript-test\tsconfig.json 선택

      [3] hello.js 실행 

PS D:\jk_git\typescript\typescript-test> tsc .\hello.ts

PS D:\jk_git\typescript\typescript-test> node.exe .\hello.js

hellow world

    (4) tasksrunner default 작업 선택 하기

       - 빌드(Ctrl + Shift + B) 에서 사용할 작업(task)이 여러개 일경우 기본으로 실행할 작업이 있다면

         <기본 빌드 작업 구성>을 선택해 주면됩니다. 

         그럼 group 속성이 추가되고 기본 으로 그 작업을 할지 말지를 선택합니다.

       - Ctrl + Shift + p -> tasks configure Default Build Task 선택

       - group이 추가 됨

{

// See https://go.microsoft.com/fwlink/?LinkId=733558

// for the documentation about the tasks.json format

"version": "2.0.0",

"tasks": [

{

"type": "typescript",

"tsconfig": "typescript-test\\tsconfig.json",

"option": "watch",

"problemMatcher": [

"$tsc-watch"

],

"group": { // 추가된 속성

"kind": "build", // 빌드(Ctrl + Shift + B) 시 수행 됨을 의미한다.

"isDefault": true // true이면 (Ctrl + Shift + B) 시 옵션 선택 없이 바로 실행

}

}

]

}

    (4) 특정 파일만 빌드 하도록 tasks.json 설정 하기

      - 간혹 특정 파일만 빌드 해야 하는 경우가 존재 합니다. 이경우에 사용하면 좋습니다. 

{

// See https://go.microsoft.com/fwlink/?LinkId=733558

// for the documentation about the tasks.json format

"version": "2.0.0",

"tasks": [

{

"label": "echo", // task 이름

"type": "shell", // shell 값을 명시적으로입력했다면 shell 을 실행

"command": "tsc ${file}", // 실행 할 명령어, ${file} 현재 파일

type이 shell 일때만 사용가능

"group": {

"kind": "build",

"isDefault": true

}

}

]

}

  3) tsconfig 속성 확장 하기

    - tsconfig.json은 기본 설정 파일 입니다. 만약 tsconfig.json에 공통 설정을 부모 설정으로 두려면 

      base.json파일을 만들어 공통으로 사용할 설정을 분리하고, 부모 설정을 자식 설정에서 확장 하려면 extends 

      속성을 이용 하여 자식에게 상속 합니다.

    (1) 공통 설정 파일 base.json

{

"compilerOptions": {

"removeComments": true,

"sourceMap": true,

"outDir": "./dist"

}

}

    (2) extend 속성을 사용한 자식 설정 파일

{

"extends": "./base.json",

"compilerOptions": {

/* Basic Options */

"target": "es5",

/* Strict Type-Checking Options */

"strict": true,

"noImplicitAny": true,

/* Module Resolution Options */

"esModuleInterop": true

} ,

"files": [

"./hello.ts",

"./myname.ts",

"./doitnow.ts"

]

}