The left-hand side of an assignment expression may not be an optional property access. 에러 해결기

바닐라 JS로 Color Flipper 프로젝트를 하던 중 다음 에러가 발생했다.

colorWrap.style.backgroundColor = COLOR_WHITE;

'colorWrap' is possibly 'null'.

null일 수도 있으니까 '표시'를 해달라는 뜻인 것 같아서 앞에 옵셔널 연산자('?')를 넣어주었다.

colorWrap?.style.backgroundColor = COLOR_WHITE;

그랬더니 이번엔 다른 에러가 떴다.

The left-hand side of an assignment expression may not be an optional property access.

'좌항 연산자가 옵셔널 속성을 안 가지고 있을 수도 있다'.. 이게 무슨 말인가 싶었는데 결국 해결한 방법은 '구체적인 타입 지정'이었다. 타입스크립트의 대부분의 에러는 보통 이 방법으로 해결이 되는 것 같다.

const colorWrap = document.querySelector('.color-wrap') as HTMLDivElement;

이렇게 뒤에 as HTMLDivElement 식으로 'colorWrap이 어떤 요소인지'를 명확히 정의해주면 더 이상 null일 수도 있음을 가리키는 옵셔널 연산자('?')는 필요 없게 된다.

// 다시 옵셔널 연산자를 지움
colorWrap.style.backgroundColor = COLOR_BLACK;

이렇게 해서 최종 에러 해결을 하게 되었다.