🐥 타입스크립트에 쓰일 tsconfig.json 속성 기능 알아보기

 

{
  "compilerOptions": {
    "esModuleInterop": true, 👉🏻import * as React from 'react'; =>  * as 생략가능하게 해주는 기능
    "sourceMap": true, 👉에러 났을 때 원래 에러난 위치로 찾아가기 좋다
    "lib": ["ES2020", "DOM"], 👉프론트 개발 할 때 꼭 켜두기
    "jsx": "react", 👉다르게 인식되기 전에 리액트꺼라고 지정
    "module": "esnext", 👉 최신 모듈 쓰겠다는 뜻 import, export
    "moduleResolution": "Node", 👉 import, export도 node가 해석할 수 있게
    "target": "es5", 👉 es2020으로 작성하여도 es5로 변환하겠다
    "strict": true, 👉 타입 채킹을 엄격하게 하겠다.
    "resolveJsonModule": true, 👉 json은 import json이라는 것을 허락하겠다.
    
    ---임폴트할 때 편하게 임폴트 해주기---
    "baseUrl": ".", 
    "paths": { 
      "@hooks/*": ["hooks/*"],
      "@components/*": ["components/*"],
      "@layouts/*": ["layouts/*"],
      "@pages/*": ["pages/*"],
      "@utils/*": ["utils/*"],
      "@typings/*": ["typings/*"]
    }
  }
}

Path는 폴더 경로가 ../../../ 이런식으로 접근해야 될 때 절대경로처럼 임폴트 설정 해주는 것이다. 이정도 타입스크립트 설정이 기본이라고 보면 된다. 

 

---

 

👉🏻 타입스크립트 ----- 바벨 ----> 자바스크립트

바벨이 중간다리 역할을 해준다.

바벨 : 모든 걸 자바스크립트로 만들어주는 아이 

"strict": true, 는 타입스크립트 할 때 무조건 true로 켜둬야한다. 아니면 any같은걸 쓰기 때문에 타입스크립트가 아닌 any스크립트가 된다 ㅋㅋㅋ