[TypeScript] 타입스크립트 템플릿 적용하기

타입스크립트 템플릿 적용하기

• 타입스크립트 템플릿으로 만들어진 CRA가 설치된다.

npx create-react-app my-app --template typescript

yarn create react-app my-app --template typescript

설치 완료!

 

tsconfig.json 뜯어보기

 

 

- target: 어떤 버전의 JS 코드로 컴파일할지 지정

- lib: 컴파일에 필요한 JS 내장 라이브러리를 지정한다.

- allowJs: JS 파일 컴파일 허용

- skipLibCheck: 타입 체킹 스킵 (컴파일 시간을 줄여줌)

- esModuleInterop: export default가 없어도 불러올 수 있음 

- allowSyntheticDefaultImports: 상동

- strict: 엄격한 타입 검사(안 쓰면 TS 쓰는 의미 없음)

- forceConsistentCasingInFileNames: 파일 이름 대소문자 판별

- noFallthroughCasesInSwitch: switch문 이상하면 에러 발생

- module: 프로그램에서 사용할 모듈

- moduleResolution: commonjs면 node로 설정 (ES5 기본값)

- resolveJsonModule: 확장자가 .json인 모듈 import 허용

- isolatedModules: 각 파일을 별도 모듈로 변환

- noEmit: TS 컴파일 시 JS 변환 파일을 만들지 않는 설정

- jsx: .tsx 확장자의 컴파일 결과 jsx 코드를 어떻게 컴파일할지 결정

 1) react: .js 파일로 컴파일 (React.createElement 함수 호출로 변환)

 2) react-jsx: .js 파일로 컴파일 (_jsx 함수의 호출로 변환)

 3) react-jsxdev: .js 파일로 컴파일 (상동)

 4) preserce: .jsx 파일로 컴파일 (jsx 파일 그대로 유지)

 5) react-native: .js 파일로 텀파일 (상동)

 

그외 다양한 옵션은 공식 문서 또는 구글링 (링크)

 

---

 

**출처: 한 입 크기로 잘라먹는 타입스크립트 (인프런, 이정환 강사님)