[ERROR] 타입스크립트 에러, Property 'letterSpacing' does not exist on type 'CanvasRenderingContext2D'.

타입스크립트 서버 실행 에러 발생. 에러 로그는 다음과 같다.

 

error TS2339: Property 'letterSpacing' does not exist on type 'CanvasRenderingContext2D'.

 

해당 에러는 CanvasRenderingContext2D 객체에 letterSpacing 속성이 없어서 발생했다고 한다. 실제로 HTML5 Canvas API에서는 LETTERsPACING 속성을 미지원한다고 한다.

 

에러 로그가 뜨긴 하는데 자간 설정은 또 잘된다. 

 

우선 다른 코드를 사용하여 자간을 설정하는 방법은 다음과 같다.

const text = t.text; // 그릴 텍스트
const x = 100; // 텍스트 시작 x 좌표
const y = 50; // 텍스트 y 좌표
const letterSpacing = t.letterSpacing || 0; // 글자 간격(px)
const font = "16px Arial"; // 폰트 스타일

txtCtx.font = font;

let currentX = x; // 현재 문자 위치를 나타낼 x 좌표
for (const char of text) {
    txtCtx.fillText(char, currentX, y); // 개별 문자 그리기
    currentX += txtCtx.measureText(char).width + letterSpacing; // 다음 문자 위치 계산
}



txtCtx.fillText(char, currentX, y): 각 문자를 주어진 위치에 그립니다.
txtCtx.measureText(char).width: 그려진 문자의 폭을 계산합니다.
letterSpacing: 문자의 폭에 원하는 간격을 추가하여 다음 문자의 위치를 설정합니다.
for (const char of text): 텍스트를 문자 단위로 분리해 반복적으로 처리합니다.

그냥 자간을 설정하는 것처럼 글자 간격을 넓히는 방법이다. 이 방법은 코드가 길어지고 비효율적인 것 같아서 다른 방법을 찾아보았다.

 

에러 메세지를 없애는 다른 해결방법에는 3가지가 있는데, 1. 타입스크립트 에러는 무시하거나, 2. 객체를 생성하여 해당 필드를 추가해주어 상속받도록 하거나, 3. 타입 단언 사용하기... 차례대로 확인해보자.

 

해당 필드가 없긴 하지만, 실제로는 동작하는 현상이 있어서, 타입스크립트의 에러 메세지를 지우고자 한다.

에러 메세지가 뜨는 이유는 CanvasRenderingContext2D에 letterSpacing 속성이 없으므로 타입스크립트가 이를 에러로 간주하는 것인데, 실제로는 실행에 문제가 없기에 해당 에러가 뜨지 않도록 수정해주면 된다.

 

1. 타입 단언 사용하기 
   TypeScript에서 특정 속성이 있다고 단언하여 에러를 무시할 수 있다. 예를 들어, letterSpacing 속성을 강제로 추가하는 방식.이 방식은 컴파일러가 더 이상 해당 부분을 검사하지 않도록 한다. 다만, 이는 런타임에서 실제로 속성이 없을 경우 문제를 숨길 수 있으니 주의 필요.
   
   (txtCtx as any).letterSpacing = t.letterSpacing + "px";
2. 인터페이스 확장하기 
   CanvasRenderingContext2D 타입을 확장하여 letterSpacing 속성을 추가하면 컴파일러 에러를 없앨 수 있다..이 방법은 CanvasRenderingContext2D를 확장하여 새로운 타입으로 사용하기 때문에 코드가 더 명확해지고 안전하다는 장점이 있다.
   interface CanvasRenderingContext2DWithLetterSpacing extends CanvasRenderingContext2D { letterSpacing?: string; } const txtCtx = someCanvasContext as CanvasRenderingContext2DWithLetterSpacing; txtCtx.letterSpacing = t.letterSpacing + "px";
3. 컴파일러 에러 무시하기 
   특정 라인에서 TypeScript 에러를 무시하려면 // @ts-ignore를 사용한다.. 이는 권장되지는 않지만, 필요한 경우 사용 가능하다.이 방법은 간단하지만, 에러를 단순히 숨기기 때문에 장기적으로는 유지보수에 어려움을 줄 수 있다.
    
   // @ts-ignore txtCtx.letterSpacing = t.letterSpacing + "px";

 

가장 권장하는 방법은 인터페이스 확장 방식이다. 이는 코드의 타입 안정성을 유지하면서도 컴파일러 에러를 방지할 수 있다. 만약 에러 메시지를 단순히 숨기고 싶다면, any를 사용하는 것이 가장 간단하다.