#22 [8장_2] JSDocs로도 타입을 지정하여 개발자 오류를 잡을 수 있을 것 같은데, 타입스크립트를 쓰는 장점이 무엇일까요?

hyeyoonS commented 2 months ago

❓문제

JSDocs로도 타입을 지정하여 개발자 오류를 잡을 수 있을 것 같은데, 타입스크립트를 쓰는 장점이 무엇일까요?

🎯답변

우선 JSDocs로 어떻게 타입검사를 할 수 있는지 살펴보겠습니다.

JSDoc 주석을 사용하여 JavaScript 코드에 타입 정보를 추가하면, 일부 IDE와 코드 편집기에서 정적 분석 도구를 통해 타입 검사를 수행할 수 있습니다.
예시
1. @param 태그를 사용하여 함수 매개변수 a와 b의 타입을 지정하고, @returns 태그를 사용하여 반환 값의 타입을 지정했습니다.

/**
 * Adds two numbers together.
 * @param {number} a - The first number.
 * @param {number} b - The second number.
 * @returns {number} The sum of the two numbers.
 */

function add(a, b) {
  return a + b;
}

.eslintrc.json 설정을 통해 주석 기반으로 타입을 검사할 수 있습니다.

{
  "plugins": ["jsdoc"],
  "rules": {
    "jsdoc/check-alignment": "error",
    "jsdoc/check-param-names": "error",
    "jsdoc/check-tag-names": "error",
    "jsdoc/check-types": "error",
    "jsdoc/implements-on-classes": "error",
    "jsdoc/newline-after-description": "error",
    "jsdoc/no-undefined-types": "error",
    "jsdoc/require-description": "error",
    "jsdoc/require-jsdoc": "error",
    "jsdoc/require-param": "error",
    "jsdoc/require-param-description": "error",
    "jsdoc/require-param-name": "error",
    "jsdoc/require-param-type": "error",
    "jsdoc/require-returns": "error",
    "jsdoc/require-returns-check": "error",
    "jsdoc/require-returns-description": "error",
    "jsdoc/require-returns-type": "error"
  }
}

JSDocs로 타입을 지정할 때의 장단점

주석을 통해 타입 정보를 제공하므로 기존 JavaScript 코드에 쉽게 통합될 수 있습니다.
타입 오류를 런타임에서 발견할 수 있습니다.

TypeScript를 사용할 때 장점

코드에 직접 타입을 추가하므로 안정성↑
코드 자동 완성 기능을 지원합니다.
대규모 코드베이스에서의 유지보수가 용이합니다.
컴파일 타임에 타입 오류를 확인할 수 있으므로, 런타임 오류를 방지할 수 있습니다.

drizzle96 commented 2 months ago

첫 번째 이유는 타입스크립트만의 유용한 타입 기능을 사용하며 더 엄밀한 타입 지정을 할 수 있습니다. JSDocs에서는 타입 확장, key-value를 구체화한 객체 타입 등을 사용할 수 없고 제네릭도 사용하기 힘듭니다. 두 번째 이유는 점진적 타입 시스템을 가진 타입스크립트는 모든 타입을 일일이 지정하지 않아도 되고 타입 추론을 활용할 수도 있기 때문에 DX에 좋습니다.

hyeyoonS commented 2 months ago

우선 JSDocs로 어떻게 타입검사를 할 수 있는지 살펴보겠습니다.

JSDoc 주석을 사용하여 JavaScript 코드에 타입 정보를 추가하면, 일부 IDE와 코드 편집기에서 정적 분석 도구를 통해 타입 검사를 수행할 수 있습니다.
예시
1. @param 태그를 사용하여 함수 매개변수 a와 b의 타입을 지정하고, @returns 태그를 사용하여 반환 값의 타입을 지정했습니다.

/**
 * Adds two numbers together.
 * @param {number} a - The first number.
 * @param {number} b - The second number.
 * @returns {number} The sum of the two numbers.
 */

function add(a, b) {
  return a + b;
}

.eslintrc.json 설정을 통해 주석 기반으로 타입을 검사할 수 있습니다.

{
  "plugins": ["jsdoc"],
  "rules": {
    "jsdoc/check-alignment": "error",
    "jsdoc/check-param-names": "error",
    "jsdoc/check-tag-names": "error",
    "jsdoc/check-types": "error",
    "jsdoc/implements-on-classes": "error",
    "jsdoc/newline-after-description": "error",
    "jsdoc/no-undefined-types": "error",
    "jsdoc/require-description": "error",
    "jsdoc/require-jsdoc": "error",
    "jsdoc/require-param": "error",
    "jsdoc/require-param-description": "error",
    "jsdoc/require-param-name": "error",
    "jsdoc/require-param-type": "error",
    "jsdoc/require-returns": "error",
    "jsdoc/require-returns-check": "error",
    "jsdoc/require-returns-description": "error",
    "jsdoc/require-returns-type": "error"
  }
}

JSDocs로 타입을 지정할 때의 장단점

주석을 통해 타입 정보를 제공하므로 기존 JavaScript 코드에 쉽게 통합될 수 있습니다.
타입 오류를 런타임에서 발견할 수 있습니다.

TypeScript를 사용할 때 장점

코드에 직접 타입을 추가하므로 안정성↑
코드 자동 완성 기능을 지원합니다.
대규모 코드베이스에서의 유지보수가 용이합니다.
컴파일 타임에 타입 오류를 확인할 수 있으므로, 런타임 오류를 방지할 수 있습니다.

summerkimm commented 2 months ago

주석을 통해 코드에 타입 정보를 추가해야 하는 JSDoc에 비해 타입스크립트는 정적 타입 시스템을 통해 컴파일 시점에 타입 체크를 수행할 수 있으며, 이는 더 안정적인 코드 작성을 가능하게 합니다. 또한, 자동 완성, 인터페이스, 제네릭과 같은 고급 기능을 제공해 JSDoc보다 더 효율적인 개발 환경을 제공합니다.

StudyForYou / ouahhan-typescript-with-react