[TypeScript] Nomad Coder - TypeScript 2주 챌린지(9일차)

타입스크립트 프로젝트 설정 명령어들

npm i -D typescript // devDependencies에 설치

tsconfig.json 파일 생성

// tsconfig.json
{
  "include" : [  // 자바스크립트로 컴파일하고 싶은 모든 디렉터리
      "src"
  ],
  "compilerOptions": { 
    "outDir": "build",  // 자바스크립트 파일이 생성될 디렉토리를 지정
    "target": "ES3",  // 어떤 버전의 자바스크립트로 타입스크립트를 컴파일하고 싶은지를 나타냄
    "lib": ["ES6", "dom"], // 어떤 API를 사용하고 어떤 환경에서 코드를 실행하는지 알려줌, 배열에 넣어두면 해당 기능의 자동완성 기능을 사용할 수 있게 해줌
    "strict": true, // 모든 실수로부터 보호해달라는 의미
    "allowJs": true // 타입스크립트 안에 자바스크립트를 허용한다는 의미
  }
}

Declaration files(정의 파일)?

타입스크립트에게 몇몇 자바스크립트 코드의 타입을 설명해주기 위해 사용하는 것
대부분의 패키지나 프레임워크, 라이브러리는 자바스크립트로 만들어져있기 때문에 타입스크립트 프로젝트에서 쓰려고 한다면, 그것들의 타입에 대해 알 수가 없다.

고로 "lib" 옵션에 넣어주게 되는건데 해당 기능의 자동완성 기능이 생기는 등, 이 API를 사용할 수 있게되는 이유는 node_modules 안에 해당 기능들의 타입들을 전부 적어줬기 때문이다.

자주 사용하게 될 일은 없지만 declaration files(정의 파일)을 직접 만들 수가 있는데 파일명을 ~~.d.ts 이런식으로 지어주면 된다.

// ~~.d.ts

interface Config {
  url: string
}
declare module "myPackage" { // 하나의 모듈을 만들어줌으로써, import해서 사용할 수 있게끔 만들어준다.
  function init(confing:Config): boolean
  function exit(code: number): number
}

JSDoc?

자바스크립트에서는 타입스크립트처럼 타입을 정해줄 수 없다. 하지만 이미 진행된 프로젝트에서 자바스크립트의 파일이 많아 전부 타입스크립트로 변경하기 어려운 상황이면 코멘트를 적어줌으로써 자바스크립트 파일을 타입스크립트의 보호를 받는 형식을 만들어줄 수 있다.

// @ts-check
/**
*밑에 함수가 무얼 의미하는지 적어줌
*@param {object} config
*@param {boolean} config.debug
*@param {string} config.url
*@returns boolean
*/
export function init(config) {
  return true
}

위 예시처럼 파일 상단엔 @ts-check 를 주석처리로 넣어주고
함수 바로 위에 코멘트를 열고 타입을 지정해준다면 자바스크립트 파일 내에서 타입스크립트의 보호를 받을 수 있다.