(VSCode) Type 'MessageEvent' is not generic. 에러 및 해결

ISSUE

아직 TypeScript를 잘 모르다보니 작업 시 IDE (VS Code)에 많이 의존하여 작업을 진행하고 있습니다. 자동완성 기능에서 시킨대로 Type을 작성했는데, 빌드 시 다음과 같은 에러가 났습니다.

Type 'MessageEvent' is not generic.

그러나 VS Code에서는 TypeScript 관련 에러가 전혀 없었고, Lint에서도 에러를 잡아내지 못했기 때문에 위 에러가 왜 나는지 알 수가 없었습니다.

제가 작성한 코드는 아래와 같이 생겼고, Generic <T>는 VS Code 자동완성이 시키는대로 입력한 부분입니다.

const getMessage = (e: MessageEvent<T>) => {
	const message = e.data;
}

MessageEvent를 클릭하여, 연관된 d.ts 파일을 열어보면 Type은 아래와 같이 정의되어 있습니다.

const getMessage = (e: MessageEvent<T = any>) => {
  /** deprecated */
  MessageEventInit: {id: number; ...}
}

d.ts 파일에 정의되어 있는 형식에 맞게 generic으로 작성했는데 왜 에러가 뜨는지 알 수 없었습니다. 다만, deprecated라는 주석이 상당히 신경쓰여서 타스 버전의 문제인 것으로 생각되어 typescript 이슈와 StackOverFlow를 열심히 찾아봤으나 원하는 답을 찾을 수 없었습니다. ㅠ__ㅠ

SOLUTION

의외로 답은 TypeScript가 아닌 VScode의 IntelliSense 이슈였습니다. 무슨 이유에선지 IntelliSense가 해당 프로젝트 내부가 아닌 다른 경로에 위치한 d.ts을 읽어오고 있었습니다.

따라서 typescript.tsdk의 경로를 해당 프로젝트 내부의 node_modules/typescript/lib로 변경해주니 정상적으로 린트가 작동되는 것을 확인했습니다. 그리고 불필요한 Generic을 삭제하였고, 에러없이 무사히 빌드할 수 있었습니다. 👍

Reference

TypeScript Compiling

💡 typescript.tsdk

VS Code will automatically detect workspace versions of TypeScript that are installed under node_modules in the root of your workspace. You can also explicitly tell VS Code which version of TypeScript to use by configuring the typescript.tsdk in your user or workspace settings. The typescript.tsdk setting should point to a directory containing the TypeScript tsserver.js file. You can find the TypeScript installation location using npm list -g typescript. The tsserver.js file is usually in the lib folder.