typescript

ㅇ js와 달리 래포론수애 타입을 지정할 수 있어, 한번 지정한 값에는 그 지정한 타입만 사용할 수 있어서 다른 타입을 넣으면 오류가 발생해 잠재적 버그를 런타임 이전에 미리 알고서 처리가 가능

ㅇ PropsTypes대신 사용이 가능하다. 컴포넌트의 props에 타입을 지정해 잘못된 값을 전달시 브라우저 실행 전에 콘솔에서 오류 처리가 가능하다

ㅇ 자동완성이 훨신 편리하게 작용한다. 컴포넌트 작성 시 어떤 props가 필요한지 자동완성으로 볼 수 있다.

typescript 준비

ㅁ 새로운 프로젝트 생성

$ mkdir ts-practice
$ cd ts-practice
$ yarn init -y # 또는 npm init -y

ㅁ typescript 설정파일 생성

$ yarn global add typescript
$ tsc --init

tsconfig.json: typescript 설정파일

ㅇ target: 컴파일된 코드가 어떤 환경에서 실행할지 정의 화살표함수를 사용하면 es5로 할시 function키워드로 변환 es6면 화살표함수 유지

ㅇ module: 컴파일된 코드가 어떤 모듈 시스템을 사용할지 정의 common으로 하면 export default Sample을 하게 됐을때 컴파일된 코드에서는 exports.default = helloWorld로 변환 es2015면 그래도 유지

ㅇ strict: 모드 타입 체킹 옵션 활성화 esModuleInterap: commonjs모듈 형태로 이루어진 파일을 es2015모듈 형태로 불러올 수 있게함

ㅇ outDir: 컴파일된 파일을 저장되는 경로 지정

tsconfig.json 파일에 outDir설정 추가

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist"
  }
}

$yarn add typescript

  "scripts": {
    "build": "tsc"
  }

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