[TypeScript] Error: Redundant double negation. no-extra-boolean-cast 오류 원인 및 해결 방법

Intro

안녕하세요.  타입스크립트 사용 중 다음의 에러가 발생했습니다. 

 

Error: Redundant double negation.  no-extra-boolean-cast

 

<button
    type="button"
    style={{
        width: !!visible ? '50%' : '100%',
    }}
>
    {text}
</button>

 

Why

위 에러는 ESLint의 no-extra-boolean-cast 규칙으로, 불필요한 불리언 캐스트(불린 값을 강제로 캐스팅하는 것)를 방지하기 위한 규칙입니다. 현재 !!visible와 같은 형태로 불린 값을 강제로 캐스팅하고 하고 있습니다. 이미 불리언 값이 존재하기 때문에 이중 부정 연산자를 사용하여 불리언 값이 될 필요가 없습니다. 

 

How to solve

따라서 아래와 같이 이중 부정 연산자를 제거하면 ESLint 에러가 사라집니다. visible 자체를 사용해도 동일한 결과를 얻을 수 있습니다.

<button
    type="button"
    style={{
        width: visible ? '50%' : '100%',
    }}
>
    {text}
</button>