[JsDoc] 타입체크 하는 자바스크립트 코딩

타입체크 하는 자바스크립트 코딩

• 타입스크립트 없이 vscode의 설정과 jsDoc으로 좀 더 타입세이프 하게 코딩 가능

jsconfig.json 생성

• compilerOptions에 아래와 같은 값들 추가

{
  "compilerOptions": {
    "jsx": "react",
    "module": "commonjs",
    "target": "es2020",
    "checkJs": true
  },
  "exclude": ["node_modules"]
}

JsDoc 작성법

/**
 * @param {array}
 * @param {...*} args 
 * @param {DOMElement} node
 * @param {ReactElement} element
 */

/**
 * optional한 param: 타입=
 * @param {object} param
 * @param {string} param.required
 * @param {string=} param.optional
 */
const A = function ({ required, optional }) {}

/**
 * void 함수: () => void
 * @param {object} param
 * @param {() => void} param.voidFn
 */
const B = function ({ voidFn }) {}

/**
 * 문자열 1(기본값) 아니면 문자열2인 경우: '문자열1' | '문자열2' =
 * @param {object} param
 * @param {'get' | 'post' =} param.method
 * @param {string} param.url

 */
const C = function ({ method = 'get', url }) {}

/**
 * 객체 배열: object[]
 * @param {object} param
 * @param {object[]} param.list
 */
const D = function ({ list }) {}

import { useHistory } from 'react-router-dom';
/**
 * 외부 라이브러리 : import('라이브러리명').속성혹은메서드
 * @param {object} param
 * @param {import('react-router-dom').match} param.match
 */
const E = function ({ match }) {}