TypeScript 정적 분석 도구: typecheck와 ESLint의 차이

TypeScript 프로젝트에서 코드의 문제를 미리 발견하기 위해 typecheck와 ESLint를 함께 사용하는 경우가 많다.

둘 다 코드를 실행하기 전에 문제를 검사한다는 공통점이 있지만, 검사하는 대상과 목적에는 차이가 있다.

간단히 구분하면 다음과 같다.

비교 항목	typecheck	ESLint
실행 도구	TypeScript Compiler (tsc)	ESLint
주요 목적	타입 검사	코드 패턴 및 규칙 검사
검사 기준	TypeScript 타입 시스템	설정된 ESLint 규칙
자동 수정	X	일부 규칙에서 가능
주요 설정	tsconfig.json	eslint.config.js

 

typecheck

typecheck는 TypeScript의 타입 시스템을 이용해 코드의 타입 오류를 검사하는 작업이다.

별도의 typecheck라는 도구가 존재하는 것은 아니며, 일반적으로 TypeScript Compiler인 tsc를 사용한다.

package.json에서는 다음과 같이 구성할 수 있다.

{
  "scripts": {
    "typecheck": "tsc --noEmit"
  }
}

--noEmit 옵션을 사용하면 컴파일 결과 파일을 생성하지 않고 타입 검사만 수행한다.

npm run typecheck

 

예를 들어 다음 코드는 타입 오류가 발생한다.

const age: number = "20";

age는 number 타입으로 선언되어 있지만 실제로는 string 값을 대입하고 있기 때문이다.

typecheck는 이처럼 TypeScript의 타입 규칙에 맞게 코드가 작성되었는지 검사한다.

 

ESLint

ESLint는 JavaScript와 TypeScript 코드를 분석하여 문제가 될 수 있는 코드 패턴이나 프로젝트에서 정의한 코딩 규칙을 검사하는 정적 분석 도구다.

예를 들어 다음 코드 자체는 TypeScript 타입 시스템상 문제가 없을 수 있다.

const value = 10;

if (value == 10) {
  // ...
}

하지만 ESLint에서 eqeqeq 규칙을 사용한다면 == 대신 ===를 사용하도록 검사할 수 있다.

 

ESLint는 설정한 규칙에 따라 다음과 같은 항목들을 검사할 수 있다.

• 사용하지 않는 변수
• 권장하지 않는 문법이나 코드 패턴
• Promise와 같은 비동기 코드의 잘못된 사용
• 프로젝트에서 정의한 코딩 규칙

또한 일부 규칙은 다음과 같이 자동 수정할 수도 있다.

eslint . --fix

ESLint는 이처럼 코드에 문제가 될 수 있는 패턴이나 정해진 규칙을 위반한 부분이 있는지 검사한다.

 

typecheck와 ESLint를 함께 사용하는 이유

typecheck와 ESLint는 서로 대체하는 관계가 아니라 서로 다른 영역을 검사하는 보완적인 관계다.

따라서 TypeScript 프로젝트에서는 두 검사를 함께 구성할 수 있다.

{
  "scripts": {
    "typecheck": "tsc --noEmit",
    "lint": "eslint ."
  }
}

각 검사는 다음과 같이 실행한다.

npm run typecheck
npm run lint

typecheck와 ESLint를 함께 활용하면 타입 오류뿐만 아니라 문제가 될 수 있는 코드 패턴과 규칙 위반까지 검사할 수 있어 보다 체계적인 정적 분석 환경을 구성할 수 있다.

typecheck
→ 타입이 올바른가?

ESLint
→ 코드에 문제가 될 수 있는 패턴이나 규칙 위반이 있는가?