TypeScript 도 써보자 (구글링)

고질병이다. node.js 로 시작했던것이 오만가지에 관심이 뻗쳐서 TypeScript 도 써봐야겠다. 

MS가 개발하고 2012 년에 발표한 언어라고 한다.

타입스크립에 관심을 갖게한 주된 이유는 정적 타입 부분이다. 

C++, C# 에 익숙해 있는 나에게 오히려 익숙하고 자연스럽다. 

공식 사이트 : http://www.typescriptlang.org/

타입스크립트 핸드북 번역 문서 

: 책을 살까하다가 이글 보니 굳이 책이 필요없을꺼 같아서 차근차근 봐야겠다. 

TypeScript의 소개와 개발 환경 구축

:  개념적인 설명이 있다. 

개념적인 도식 설명이 좋았다.  구글이 2017년에 사내 표준언어로 TypeScript 사용을 승인했다고 한다. 

TypeScript 현업 적용 후기

: 2018년 5월에쓰인 글이고  VSCode 와 궁합이 좋다는 내용과 , 코드가 기존보다 장황해 져서 생산성이 떨어지지만 디버깅 시간을 절감할수 있다는 부분에 끌린다. 

2018년과 이후 JavaScript의 동향 - 브라우저 밖의 JavaScript

:  타입스크립트랑 딱히 관련은 없지만 타입스크립트와 연계해서 사용해야할 툴들을 선택할때 도움될것 같다. 

* TypeScript 를 쓰기로 했으니 TDD 도 해보자 

ts-node 패키지

일단 ts-jest-1st 란 폴더를 만들고 cmd 에서   

#> npm init -y 

#> npm i -D ts-node

#>npm i -D typescript jest @types/jest

#> npm i -D ts-jest

여기까지 설치해놓고 

package.json 을 아래와 같이 변경 

{
  .... 생략 
  "scripts": {
    "test": "jest"
  },
  ... 생략
  },
  "jest": {
    "transform": {
      "^.+\\.ts$": "ts-jest"
    },
    "testRegex": "\\.test\\.ts$",
    "moduleFileExtensions": [
      "ts", "js"
    ],
    "globals": {
      "ts-jest": {
        "enableTsDiagnostics": true
      }
    }
  }
}
 

실제는 이런모습 

문득 npm -D 옵션이 궁금해서 찾아 보니  "--save-dev" 

https://docs.npmjs.com/misc/config#shorthands-and-other-cli-niceties

이제 파일을 작성해보자! 

루트 경로에 app.js 파일을 만들고

class Calculator{
    add(x:number, y:number){
        return x + y;
    }
}
export {Calculator};

요렇게 입력하고  테스트를 위해 test 폴더를 하나 만들어서  app.test.js 파일을 생성하고 

import { Calculator } from "../app";
 
describe('App Test', () => {
    test('add fuction ', () => {
      
        let myCalc = new Calculator();
        expect(myCalc.add(1,2)).toBe(3)
    })    
  })

그리고 cmd 에서  #> npm test 라고 실행 

중간에 워닝이 뜨긴하는데 일단 된다.! 

실제 app.js 실행은

#> npx ts-node app.ts   로 된다. 

이제 TypeScript 로 TDD 첫걸음을 뗐다 ! 

( 1시간 후...)

오! 또 신기한거 알았다. 커버리지 관련으로 Istanbul 을 보고 있었는데 Jest 에도 커버리지가 된다고 한다. 

설정은 고작 package.json 에  --coverage 를 붙여주기만 하면된다.  

"scripts": {
    "test": "jest --coverage"
  }

커버리지 테스트를 위해 일단 기존 소스에 함수를 추가하고 

테스트 쪽 로직은 수정 없이 바로 테스트 

대박 신기 ,  app.ts 8번째 라인 실행 안됐다고 나온다. 

아 그럼 다음은 이걸 활용해서  git push 가 안된다거나 build 를 안되게 하거나 하는걸 찾아봐야겠다. 

참고 
1.글을 작성하는데 가장 많이 참조한 글 :  https://gongzza.github.io/javascript/learning-typescript-with-jest/

2. jest  , Karma , Mocha 의 장단을 비교 글 : https://sungjk.github.io/2017/03/03/testing-react-application.html