TS2367: This comparison appears to be unintentional because the types '"A"' and '"B"' have no overlap.

타입스크립트 사용하면서 발생한 에러입니다.

 

 

---

 

 

문제

<h3>
  {(response === 'A' && response !== 'B' ? !show : loading) && (
    <>
      <Loading width={26} height={26} />
      Thinking
    </>
  )}
</h3>

&&연사자를 사용해서 두 개의 조건을 걸었는데 제목과 같은 타입에러가 발생했습니다.

 

 

---

 

 

해결방안

<h3>
  {(response !== 'B' && response === 'A' ? !show : loading) && (
    <>
      <Loading width={26} height={26} />
      Thinking
    </>
  )}
</h3>

 

단순히 순서의 차이로 보입니다.

저는 웹스톰을 사용하고 있는데, 거기서 나오는 해결방안으로 위와 같이 순서를 바꾸니깐 에러가 사라졌습니다.

(vscode도 똑같을 꺼라고 생각합니다.)

TypeScript에러라 사실 동작하는 데는 상관없지만,

build 할 때 에러도 날 테고, TS사용하는데 규칙을 지키는 게 좋을 듯싶습니다.