[tsconfig.json] 타입스크립트를 편하게 사용하기 위한 파일

타입스트립트로 프로젝트를 진행하기위해 초기세팅을 진행하는데 tsconfig.json 이라는 파일을 생성하라고한다.

 

파일없이도 tcs 명령어 잘 작동되는데 왜죠..?🤔

생성안하고 쓰려고 했지만ㅋㅋ  정말 필요한것이라명 나중에 잘못되고 돌아오기 힘들것 같아서 일단 쓰는 이유를 찾아보았다.

 

---

 

⭐️ 먼저 중요하게 알아야할 사실!!⭐️ 
타입스크립트언어를 자바스크립트로 컴파일해주는 라이브러리이다.

 

 

사용하는 이유:

✅  tsconfig.json파일을 생성함으로써 vscode에게 내가지금 타입스크립트로 작업할거니까 알아서 JS로 잘 컴파일 해줘라~ 라고하는 것이라고 이해하면 될 것 같다

 

✅ JS 로 컴파일을 할 때의 옵션들을 설정해 줄 수 있다. (내가 설정해준 옵션들은 아래서 따로 설명할 예정!)

 

✅  JS & TS 파일을 동시에 띄우면 에러가나는것을 방지할 수 있다.

 

 

 

설정해준 옵션들:

중요한것들 설명👀 (outDir, target,lib... )

{
  "compilerOptions": {
    "outDir": "build", 
    // 자바스크립트 파일이 생성될 디렉터리 지정 (현재 build라는 폴더에 넣을것이라고 알려줌)
    "target": "es6", 
    //JS 의 어떤 버전으로 컴파일 시켜줄건지
    "lib": ["dom", "ES6"], 
    //TS에게 어떤 API를 사용하고 어떤환경에서 코드를 실행하는지 지정해준다. (dom:브라우저환경)
    // TS는 처음부터 DOM API에 대한 정보를 가지고 있지 않기에 이를 사용하기위해서는 TS에게 알려줘야한다. 
    // 이렇게 설정해줌으로써 document와 같은 웹API를 TS에서도 사용할 수 있다. 
    // 이 설정을 해주지 않으면 TS는 어떤 환경에서 사용될 코드인지 알 수 없다.
    // 현재 ES6를 사용하는 서버와 브라우저 환경에서 코드를 실행시킬 것을 설정해준 상태
    "allowJs": true,
    // TS & JS파일을 함께 사용가능
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    // TS가 모든 타입을 검사해 에러로 부터 보호해 줄 수 있게해주는 옵션.
    // TS는 자바스크립트의 패키지들을 사용할 수 있게 해준다.
    // 하지만 언어 특성상 사용하는 모~~든 코드의 타입을 알고 있어야하기 때문에
    // 패키지의 형태, 어떤함수가 있는지 등등을 모두 알려주어야 에러없이 진행 할 수 있으며 TS역시 에러에서
    // 보호해 줄 수 있다. 
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "incremental": true,
    "baseUrl": "src"
  },
  "include": ["src"] // JS 로 컴파일 할 모든 디렉터리를 넣어준다. 
}