tsc --init / d.ts / @ts-check / JSDoc

📍tsconfig.json 생성

tsc --init

 

📍tsconfig.json 구조

- compilerOptions 필드와 include 필드는 대등한 위치

{    
    "compilerOptions": {},
    "include": {}
}

 

 

📍declaration files

- 정의 파일은 자바스크리브 코드의 모양을 타입스크립트에게 설명해주는 파일이다

- .js 로 작성된 모듈을 .ts 에서 import해서 사용할 때 정의 파일이 없으면 에러가 발생

- .d.ts 로 끝나는 정의 파일이 필요

 

📍package.js

- 간단한 모듈을 만든다

- 일반적인 모듈처럼 자바스크립트로 만들어야 한다

export function init(config) {
  return true;
}

export const exit = (code) => {
  return code + 1;
};

 

📍package.d.ts

- 직접 만든 모듈인 package.js 를 정의해준다

interface Config {
  url: string;
}

declare module "package" {
  function init(config: Config): boolean;
}

 

 

📍index.ts

- 이 패키지를 import하는데, 파일 경로 대신 파일 이름만 쓰면 된다

// import { init } from "./package"; -> 에러
import { init } from "package";

 

📍@ts-check

- tsconfig 에서 allowJS 옵션을 true로 해주면 .js 파일을 활용 가능

- 또한 .js 파일을 타입 체크하는 것도 가능하다

- .js 파일 최상단에 주석으로 @ts-check 옵션을 추가해주면 된다

 

📍JSDoc

- .js 파일 안에서 타입을 설명해주는 주석 기능

- /** 로 시작한다 (일반적 주석과 살짝 다름)

- 대부분의 IDE에서 /** 까지만 입력해도 자동완성 된

 

// @ts-check
/**
 * 매개변수 지정
 * @param {object} config
 * @param {boolean} config.debug
 * @param {string} config.url
 * @returns {boolean}
 */
export function init(config) {
  return true;
}

/**
 * 타입 지정
 *  @type {string}
 */
let str;
/**
 * 함수 타입 지정
 * @param {number} a
 * @param {number} b
 * @returns {*} 모든 값을 리턴하도록 설정도 가능
 */
const add = (a, b) => a + b;