[내배캠] TypeScript 개발 환경 세팅하기

node.js 설치

node.js 가 설치되어 있어야 한다.

 

대부분은 VSCode를 설치하면서, 즉 개발 환경을 세팅하면서 설치하였을 테니 이 과정은 생략한다.

본인이 npm 명령어를 사용해서 패키지를 설치하고 있었다면 설치가 된 것이다.

 

혹시 확인해보고 싶다면

npm -v
node -v

터미널에서 위 명령어로 각각의 버전을 확인해볼 수 있다.

이후 터미널의 아래의 명령어를 프로젝트 내에서 입력하면 TypeScript로 파일을 작성할 수 있다.

typescript 설치

npm i -g typescript

타입스크립트를 전역으로 설치한다는 명령어인데 yarn을 사용했던 사람들은 조금 더 설정이 복잡하다.

yarn add typescript --dev
yarn tsc --init
yarn add @types/react @types/react-dom --dev

Mac 에서 권한 오류 뜨는 경우

기분 좋게 타입스크립트를 처음 시작하려고 타입스크립트를 설치하려는데 충격적인 에러를 뿜어낼 수 있다.

 

권한 관련해서 에러가 뜨는 경우, 터미널에서 아래의 명령어를 추가해주면 그 다음부터는 전역으로 설치할 수 있다.

npm config get prefix

위 명령어를 쳤을 때 사진처럼 /usr/local이 나오는 것이 일반적이다.

 

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

그 다음 위 내용을 복붙하고 PC 패스워드를 입력하고 나면, 그 이후부터는 npm 명령어로 typescript를 전역에 설치할 수 있다.

tsconfig.json 파일 생성하기

루트 폴더에 타입스크립트 ts파일들을 .js 파일로 어떻게 변환할 지 세부설정하는 tsconfig.json 파일을 생성한다.

기본 내용은 아래와 같다.

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
    }
}

위 설정은 IE와의 호환까지 생각해서 설정한 내용임.

설정을 추가한다면

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "noImplicitAny": true,
        "strictNullChecks": true
    }
}

• noImplicitAny : any라는 타입이 의도치 않게 발생할 경우 에러를 띄워주는 설정.
• strictNullChecks : null, undefined 타입에서 조작 시 에러를 띄워주는 설정.

아래는 종종 쓰이는 설정들 총망라.

{
 "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문 이상하면 에러내기 
 }
}

.ts 파일 .js로 자동 변환하기

브라우저는 자바스크립트만 읽을 수 있기 때문에 .ts로 작성한 파일을 .js로 변환해주어야 한다.

터미널을 열고 아래 명령어를 입력하면 자동으로 .ts의 입력사항을 .js 파일에 변환해준다.

터미널을 닫으면 실시간 변환도 종료된다.

tsc -w