'TypeScript의 창 유형에 속성이 없습니다' 오류를 수정하는 방법

외부 라이브러리, 전역 변수 또는 TypeScript의 네이티브Window 개체와 관련된 모든 작업을 수행한 경우 다음 오류가 발생했을 수 있습니다.

Property does not exist on type 'Window & typeof globalThis'.ts (123)

번거롭지만 정말 간단하게 고칠 수 있으니 시작해 봅시다!

'TypeScript의 창 유형에 속성이 없습니다' 오류 발견

저는 최근에 클라이언트 사이트에서 작업하고 있었는데 우수한 서비스Cloudinary를 사용하는 것과 관련이 있었습니다. 그들은 약간의 간단한 JS 만 있으면되는 동등하게 우수한 embeddable widgets을 가지고 있습니다. 다음은 코드 스 니펫입니다.

const myWidget = window.cloudinary.createUploadWidget(options, processResults);
// ...rest of the file

문제는 이것이 Next.js의 React 앱이고 TypeScript 코드베이스라는 것입니다! 코드는 잘 작동했지만 빌드 명령에서 고전적인 'Property does not exist on type Window in TypeScript' 오류가 표시되고 TypeScript는 이에 대해 끝없이 불평했습니다.

문제 식별

Window 유형은 lib.dom TypeScript 모듈에 정의되어 있습니다(following documentation on TSDoc . 여기에 수많은 속성이 있는 전역Window 개체 정의가 있음을 알 수 있습니다.

그러나이 목록에 정의되지 않은 것이 필요한 경우 Property does not exist on type 'window & typeof globalthis'.ts 스타일 오류가 발생합니다. 이에 대한 일반적인 예는 분석을 위해 Google에서 외부 라이브러리를 추가하거나 태그 관리자 또는 제 경우에는 Cloudinary를 추가하는 경우입니다.

Cloudinary는 브라우저에서 제공하는 전역cloudinary 개체에 자체window 개체를 추가했지만 TypeScript는 정의되지 않았기 때문에 그것이 무엇인지 또는 어떤 유형을 가지고 있는지 전혀 모릅니다.

이것은 오류가 실제로 올바른 방향으로 우리를 가리키는 경우 중 하나입니다.

'TypeScript의 창 유형에 속성이 없습니다' 오류 수정

다행스럽게도 수정은 매우 간단하며 세 단계로 이루어집니다.

프로젝트 어딘가에 index.d.ts 파일을 생성합니다.

파일을 편집하여 Window 객체의 유형을 정의합니다.

(선택 사항) tsconfig.json 파일에 파일에 대한 참조를 추가합니다.

번호 1부터 다음을 index.d.ts 파일에 추가해야 합니다.

export {};

declare global {
  interface Window {
    somePropertyHere: any;
  }
}

If you don't have such a file, then create a folder in your project root or src folder called types. In here, add a new file called index.d.ts and then add the previous code snippet in there.

프로젝트에 이미 index.d.ts 파일이나 global.d.ts(또는 다른 선언된 프로젝트 유형 파일)이 있고 다른 유형 정의가 있는 경우 export {} 행이 필요하지 않을 수 있습니다. 해당 부분을 생략하고 나머지를 추가할 수 있습니다.

프로젝트 요구 사항에 따라 여기에서 원하는 다른 속성을 정의할 수 있습니다.

export {};

declare global {
  interface Window {
    cloudinary: any;
    gtag: (...args: any[]) => void;
  }
}

위 스니펫에서 유형이 cloudinary인 any 전역 개체를 추가한 것을 볼 수 있습니다. 안타깝게도 Cloudinary는 위젯에 TypeScript 옵션을 제공하지 않는 것 같아서 cloudinary가 무엇인지 확신할 수 없습니다. 개체가 포함됩니다. 그러나 gtag의 경우 반환 유형이 void인 함수임을 알고 있습니다.

가능한 경우 any 를 선택하기보다는 항상 속성을 강력하게 입력하십시오.

마지막으로 여전히 문제가 발생하는 경우 연결을 위한 마지막 단계를 수행해야 할 수 있습니다. index.d.ts 파일의 위치를 ​​기록하고 프로젝트의 루트에 있어야 하는 tsconfig.json 파일로 이동합니다.

{
  "compilerOptions": {
    // ... other settings
    "typeRoots": ["./src/types", "./types"]
  }
}

typeRoots 속성(배열) 아래에 index.d.ts 파일이 포함된 폴더의 경로가 있는지 확인합니다. 내 경우에는 ./src/types에 있었으므로 내 tsconfig.json 파일에 추가했습니다.

마무리

그리고 그것은 그렇게 간단합니다. TypeScript의 'Property does not exist on type Window in TypeScript' 오류에 대한 TypeScript의 불만으로 인해 어려움을 겪었다면 이를 단번에 고칠 수 있는 지식과 정말 간단한 단계가 있어야 합니다.