[NextJS + ChartJS] [오류 해결] Property 'getContext' does not exist on type 'never'.

Chart JS를 사용하던 중 그래프에 그라데이션을 넣어주고 싶었다.
그래프에 그라데이션을 넣기 위해 getContext() 메서드를 이용해서 드로잉에 필요한 속성과 함수를 가진 객체를 생성했다. getContext() 메서드는 렌더링 컨텍스트 타입을 지정하는 하나의 파라미터를 갖는데, 나는 2d 그래픽의 그래프를 생성하기 때문에 '2d'로 지정해주었다.

if (canvasEl.current !== null) {
	  // getContext() 메서드
      const ctx = canvasEl.current.getContext('2d');
	  
      // 그래프 내 그라데이션
      const gradient = ctx.createLinearGradient(0, 0, 0, 180);
      gradient.addColorStop(0, colors.blue.half);
      gradient.addColorStop(0.7, colors.blue.quarter);
      gradient.addColorStop(1, colors.blue.zero);
...

코드를 작성하고 실행시켰을 때 그라데이션은 잘 적용되지만, getContext() 메소드에서 오류 메세지가 떴다.

1. Property 'getContext' does not exist on type 'never'.

오류를 보고 getContext() 메소드를 실행시킬 값이 null 또는 undefined이면 오류가 나는 것으로 이해했다. 이를 해결하기 위해 조건문을 사용하여 canvasEl.current 값이 존재할 때 getContext() 메소드를 사용하도록 하였지만 해결되지 않았다.

해결방법

열심히 찾아본 결과, ref 또는 getElementById를 이용해서 불러온 요소가 캔버스 요소임을 앱에게 이해시켜주어야 한다고 한다.
그 방법으로는 HTMLCanvasElement 타입임을 명시해 주면 된다.

const canvas = canvasEl.current;
const ctx = (canvas as HTMLCanvasElement).getContext('2d');

2. Conversion of type 'null' to type 'HTMLCanvasElement' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.

위와 같이 하면 이런 새로운 오류가 뜬다. 이 오류의 의미는 타입이 null 일 때, 'null' 유형을 'HTMLCanvasElement' 유형으로 변환하는 것은 다른 유형과 같지 않기 때문에 조심하라는 의미이다. 이 문제를 해결하기 위해서는 해결책이 제시되어 있는데, 우선 'unknown' 타입으로 전환을 하는 것이다.

const canvas = canvasEl.current;
const ctx = (canvas as unknown as HTMLCanvasElement).getContext('2d');

이렇게 하면 오류 없이 그라데이션 넣은 그래프를 띄워줄 수 있었다.