[Typescript] 설치와 셋팅

설치

npm instsall -g typescript

에러가 나면노드버전을 올려보자

작업 폴더에 .ts 만들고 시작한다

ts 파일은 js랑 똑같이 사용이 가능하다. 다만 웹브라우저는 ts파일을 알아듣지 못하기 때문에 js파일로 변환 작업이 필요하다.

js 파일로 변환

변환하는 방법은 간단하다 터미널창에

tsc -w

를 입력하고 해당 터미널 창을 끄지않으면 ts파일을 저장할때마다 자동으로 js파일로 변환해준다

컴파일 세부설정

프로젝트 폴더에 tsconfig.json이라는 파일을 하나 만들어준다

// tsconfig.json
{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
    }
}

그리고 json 파일 안에 복붙하자

• target : 타입 스크립트 파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분 es5 로 셋팅해놓으면 es5 버전 자바스크립트로 컴파일(변환) 해준다.
• module : 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정한느 곳이다. commonjs는 require 문법 es2015, esnext는 import 문법을 사용한다

tsconfig에 들어갈 기타 항목들

{
 "compilerOptions": {

  "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
  "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
  "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 
  "checkJs": true, // 일반 js 파일에서도 에러체크 여부 
  "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
  "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
  "outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
  "outDir": "./", //js파일 아웃풋 경로바꾸기
  "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
  "removeComments": true, //컴파일시 주석제거 

  "strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
  "noImplicitAny": true, //any타입 금지 여부
  "strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기 
  "strictFunctionTypes": true, //함수파라미터 타입체크 강하게 
  "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
  "noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
  "alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기

  "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
  "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
  "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기 
  "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기 
 }
}