오널은 타입스크립트에 대해서 포스팅하겠다

참고한 싸이트
타입스크립트 한글 깃북

what is TypeScript?

typeScript는 microsoft에서 만든 언어이며 기존 javasciprt의 슈퍼셋(상위계념)으로
javascript의 정적 타입을 추가한 언어이다.
기존 javascript가 인터프리터 (javascript)언어인 반면에 typescript는 컴파일 언어이다
기존 컴파일 언어와는 조금 다른 면이 있어서 transpile이라고도 한다

기본적인 ts테스트 환경구축

1. 노드.js를 설치한뒤 npm init으로 패키지 환경을 만든다.
2. install tyscript -g install nodemon -g install concurrently -g으로 패키지를 설치한뒤에
3. tsc --init 으로 tsconfig만든뒤 설정한다

{
  "compilerOptions":{
    "target":"ES2020",// 트랜스 파일된 js를 어떤 형식으로 할건지
    "module":"CommonJS", // 모듈형식을 어떤방식으로 할건지
    "rootDir":"./src",	// 트랜스 파일 시킬 ts파일들의 root
    "outDir":"./build", // 트랜스 파일된 js파일들이 root
  }
}

5. package.json에 스크립트 추가

{
  "script":{
      "startTsc":"tsc -w", // ts파일을 저장할 때마다 계속 트랜스파일
      "startJs":"nodemon build/index.js", // index.js파일이 바뀔때마다 재실행 시켜줌
      "start":"concurrently \"npm run startTsc\" \"npm run startJs\" "  // 위에 스크립트를 동시에 실행
  }
}

6. rootDirectory에 src 폴더와 build 폴더를 생성
7. npm run start
   *만약 ts-node 를 사용한다면 ts파일 자채를 실행시킬수있다.

ts-node + nodemon를 사용하여 테스트환경 구축

참고한 싸이트

npm install -g ts-node
ts-node -v 
버전인 나오면 설치된겨
npm install nodemon --save-dev

1번만 실행하기

ts-node 파일명

와칭시키기

nodemon --watch '와칭시킬 파일경로' --exec 'ts-node' tsnode으로 실행시킬 파일명

ex) nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts

써야하는 이유

js으로 개발할땐 타입신경을 안써도 된다는 이점이 생산성을 높여주기도 한다.
하지만 프로젝트가 커지고 동료들과 협업을 해야하는 상황에선 이같은 장점이 너무나도 큰 걸림돌이 된다.

1. 백엔드 api가 바뀌어 필드명이 바뀌거나 값자체가 없어지거나 하는경우
   • 파일 전체를 뒤져가며 해당 api가 사용된 곳을 찾아서 고쳐야하며 다 찾은줄 알았는데 또 발견되는 경우가 허다할것이다.
2. component의props를 변경하는경우
   • 위에 상황처럼 해당 component를 사용하는 곳을 전부찾아 고쳐야한다 이또한 다찾을줄 알았어도 또 발견되는 경우가 많을것이다.

하지만 ts를 사용한다면 해당 api/component의 리턴값을 정의한 interface나 type을 찾아 바꿔주면 알아서 틀린곳을 트랜스파일 단계에서 전부다 잡아준다.

위에서 말한것처럼 유지보수 측면에서도 뛰어난 성능을 보이며

개발단계에서도 type만드는 시간을 투자하면 이후 사용되는 곳에선 자동완성을 지원하기 때문에
결과적으로 생산성이 증가할 것이다.