(TIL) 타입스크립트 기초 - 초기 세팅 및 컴파일 옵션

초기세팅

• 터미널에서 아래와 같이 명령어 입력하여 package.json 파일을 생성해준다

  npm init -y

  참고로,-y는 npm init 하면 물어보는 옵션을 미리 y(yes)로 진행하겠다는 의미
  (참고: https://juicyjerry.tistory.com/entry/npm-init-y-%EB%9E%80)

• 타입스크립트 설치

  npm i -D typescript

  -D 옵션은 devDependencies 에
  (참고: https://jooy34.tistory.com/15)
  

• tsconfig.json 생성 및 설정

  tsconfig.json 파일이 있는 디렉토리가 typescript 루트 디렉토리임을 나타냄
  이 파일에서 프로젝트를 컴파일 하는데 필요한 루트 디렉토리와 컴파일러 옵션을 지정할 수 있음

// tsconfig.json

{
  "include": ["src"], // js로 컴파일하고 싶은 디렉토리를 넣어줌 => src 폴더의 모든 파일을 확인한다는 의미
  "compilerOptions": {
    "outDir": "build", // 컴파일된 자바스크립트 파일이 생성될 디렉토리 지정
    "target": "ES6" // 어떤 버전의 자바스크립트로 타입스크립트를 컴파일하고 싶은지 지정
    "lib": ["ES6", "DOM"] // 코드가 실행될 환경을 알려줌, 즉 사용할 api가 뭔지 알려줌으로써 자동완성 기능을 제공
  }
}

타입 정의

우리가 npm에서 받아서 사용하는 대부분의 라이브러리나 패키지는 자바스크립트를 사용하는데 타입스크립트에서 그걸 어떻게 사용할 수 있는가?
=> 타입스크립트에서 node_modules에 설치된 자바스크립트 모듈을 사용하려면 타입 정의가 필요함
=> declaration file (형태: 파일이름.d.ts 파일)에 모듈에서 사용하는 각종 변수, 함수들의 타입을 정의해주면 타입스크립트는 이걸 인식하고 판단하고 안내해줌