타입 스크립트 - 설정,정의 파일, JSDoc

tsc --init (글로벌로 typescript를 설치 했을때)

첫 init설정값

  "compilerOptions": {
    "target": "es2016",                    //컴파일 문법                 
    "module": "commonjs",           // js 파일 간에 import 시 어떤 문법을 사용할지 지정한다.                   
    "esModuleInterop": true,   //export default가 없는 라이브러리도 * as 없이 불러올 수 있다.                      
    "forceConsistentCasingInFileNames": true,        //대소문자 구분      
    "strict": true,                                  //타입검사를 엄격하게 할것인지  
  }

tsconfig 설정

  "include": [
    "src"
  ], //src의 모든파일을 검사
  "compilerOptions": {
    "target": "ES6", //컴파일 문법 ES6으로 변경                 
    "module": "commonjs", // js 파일 간에 import 시 어떤 문법을 사용할지 지정한다.                   
    "esModuleInterop": true, //export default가 없는 라이브러리도 * as 없이 불러올 수 있다.                      
    "forceConsistentCasingInFileNames": true, //대소문자 구분      
    "strict": true, //타입검사를 엄격하게 할것인지 
    "outDir": "bulid" //컴파일된 js파일을 어디로 보낼것인지
    "lib": ["ES6","DOM"]   //ES6를 지원하는서버와 브라우저 환경에서 코드를 실행시킨다고 설정
    "allowJs": true, //JS파일도 읽어들이는지

  }

• lib 옵션으로 Declaration files 정의파일을 읽어들일수있다.

Declaration files(정의 파일)

자바 스크립트로 만들어진 라이브러리를 타입 스크립트 프로젝트에 쓰려고한다면
타입 스크립트는 그 타입에대해 알 방법이없다.
타입스크립트에게 우리가 불러올 자바스크립트 함수의 모양을 설명하려면 따로 정의가 필요함

타입스크립트는 d.ts라는 정의파일을 만들수 있음

ex) myPackage.js

export function init(config) {
  return true;
}

export function exit(code) {
  return code + 1;
}

Js 파일의 init 함수를 ts에서 사용한다고 하자
myPackage.d.ts

interface Config{
  url:string;
}
declare module "myPackage"{
  function init(config:Config):boolean;  
  //{url : string} 을 매개변수로 받고, boolean값을 return 한다고  정의
} 

ts파일에서 import한 함수의 타입을 알 수 있다
index.ts

import {init} from 'myPackage';

init ({
  url:"string"
})

• 사실 d.ts파일을 직접 정의하는일은 자주있진않다. 하지만 어떤 형식으로 되어있는지는 알아야 한다.

JSDoc :주석으로 이루어진 문법

만약 이미 사용중인 자바스크립트파일이있는데 양이 많아서 TS로 전부 전환하기 힘든상황이라면

JSDoc을 사용하면 자바스크립트파일을 수정하지 않으면서 타입스크립트의 보호를 받을 수 있다.

//타입스크립트 파일에게 JS 파일을 확인하라고 알리는것, //@ts-check을 기입한다.

//@ts-check 
/**
 * 설명을 해줄수있다.
 * @param {object} config 
 * @param {string} config.url
 * @returns {boolean}
 * 
 */
export function init(config) {
  return true;
}
/**
 * 
 * @param {number} code
 * @return {number}
 */
export function exit(code) {
  return code + 1;
}

코드가 JSDoc의 지시대로 되어있지않으면 VSCode상에서 에러가뜬다.
하지만 주석일뿐이니 파일이 먹통이되거나 하진않는다.
(하지만 타입이 원하는대로 안들어왔다는건 애초에 코드에 문제가 있다는 뜻이니 확인해야함)