tsconfig.json 기본세팅, d.ts, JSDoc

Typescript로 블록체인 만들기 강의를 토대로 정리한 내용입니다. 

 

tsconfig.json

tsconfig.json파일이 있으면 vs code는 우리가 타입스크립트로 작업하는것을 알게되고 자동완성 기능을 제공해준다.

{
  "include": ["src"], //코드가 있는 경로
  "compilerOptions": {
    "outDir": "build", //파일이 생성될 디렉터리를 지정, build폴더 하위에 컴파일된 파일이 생성된다.
    "target": "ES6", // 컴파일할 자바스크립트 버전
    "lib": ["DOM", "ES6"], // 타입스크립트에게 어떤 api를 사용하고, 어떤환경에서 실행되는지 설명
    "allowJs": true, // 타입스크립트 안에 자바스크립트 허용
    "esModuleInterop": true,
    "module": "CommonJS"
  }
}

 

타입스크립트에서 자바스크립트를 사용할 때 타입설정하는법

 

타입스크립트에서 자바스크립트 코드를 import 해오는 경우 타입이 선언되지 않았을 경우 오류가 난다. 
tsconfig.js에서 allowJs: true를 해주면 js코드를 정의없이도 사용할 수는 있다. 

1. 자바스크립트 정의 파일(d.ts)을 만들어서 사용한다.
2. JSDoc을 사용해서 js파일에 타입스크립트를 위한 코멘트를 달아준다.

d.ts

타입정의는 타입스크립트가 몇몇 자바스크립트 코드와 api의 타입을 설명할 수있도록 한다.
정의파일은 자바스크립트 코드의 모양을 타입스크립트에게 설명해주는 파일이다.

 

JSDoc

자바스크립트 코드를 다시 작성할 필요없이 코멘트 작성으로 타입스크립트에게 타입을 알려준다.

코멘트를 타입스크립트가 확인해서 타입을 체크해준다. 

1. tsconfig파일에 allowJs 속성을 true로 입력해준다.

2. ts-check 삽입, 코멘트 작성

// myPackage.js

// @ts-check
/**
 * Initializes the project
 * @param {object} config 
 * @param {boolean} config.debug
 * @param {string} config.url
 * @returns {boolean}
 */
export function init(config) {
  return true;
}

/**
 * exits the program
 * @param {number} code 
 * @returns {number}
 */
export function exit(code) {
  return code + 1;
}

 

요즘은 node 패키지 설치하면 d.ts파일이 포함되어있는 경우가 많다.

노드 패키지에 타입이 없는경우 

아래 npm 패키지로 타입을 설치할수있다.

npm i -D @types/node