[TypeScript] 사용하지 않는 변수와 파라미터로 인한 빌드 실패문제 해결 방법

에러 발견

React와 TypeScript를 활용하여 프로젝트를 진행하던 도중 프로젝트를 빌드하다가 다음과 같은 에러를 발견했다.

리액트 프로젝트 빌드 실패

setData라는 값이 선언되었으나 사용되지 않았다는 이유로 빌드에 실패하였다. 처음에는 그냥 setData만 삭제하면 실패하지 않겠구나 하고 setData를 제거하는 선에서 끝낼려고 했는데, 생각해보니 너무 억울했다. 고작 그런 이유로 에러를 발생시킨다는게 규칙이 너무 엄격한 것 같다고 생각했다. 그래서 이러한 규칙을 완화하기 위해 에러가 발생하는 이유를 찾아보았다.

에러 원인

빌드를 시도했을 때 에러가 발생하였으니 컴파일 과정에서 실패했을거라 예상하고 tsconfig.json 파일을 열어보았다. TypeScript 공식문서에서 tsconfig.json에 대해서 확인할 수 있다.

 

그러면 tsconfig.json에 대해서 간단히 살펴보자

tsconfig.json이란

• 타입스크립트를 자바스크립트로 변환 시키는 컴파일 설정을 한꺼번에 정의 해놓는 파일
• 프로젝트의 루트 디렉토리에 위치하며, 이를 통해 vscode는 TypeScript 프로젝트임을 인식
• tsc나 ts-node 명령어 실행 시, tsconfig.json에 명시한 옵션을 기준으로 프로젝트 소스를 컴파일

tsconfig.json의 주요 옵션

• CompilerOptions: TypeScript 컴파일러의 옵션들을 지정하는 속성
• files: 컴파일할 파일들의 개별 목록을 지정하는 속성
• include: 컴파일할 파일들을 지정하는 속성
• exclude: 컴파일 대상에서 제외할 파일들을 지정하는 속성
• extends: 다른 tsconfig.json 파일을 상속받아서 설정을 재사용할 수 있게 해주는 속성

이런 정보를 통해 컴파일 관련 옵션인 CompilerOptions을 살펴보았다. 여러가지 속성을 살펴본 결과 다음과 같은 속성을 발견하였다.

• noUnusedLocals: 사용하지 않는 지역변수가 존재하면 에러 발생
• noUnusedParameters: 사용하지 않는 파라미터가 존재하면 에러 발생

너무 내 상황과 알맞는 것 같아서 tsconfig.json 파일을 열고 위 속성들의 값을 false로 변경하였다. 그 결과 빌드 에러를 아주 기분좋게 해결하였다.

빌드 성공 화면