유형 스크립트 모듈 내에서 전역 유형(예: "창") 확장

유형 스크립트 모듈 내에서 전역 유형(예: "창") 확장

유형 스크립트를 작성하고 모듈을 사용하지 않는 경우 글로벌 확장이 가능합니다.Window물건.예를 들어, 다음을 컴파일합니다.

interface Window {
    myCounter: number;
}

window.myCounter = window.myCounter || 0;
++window.myCounter;

function outputLoadingDetails() {
    console.log(`myCounter= ${window.myCounter}`)
}

하지만 만약 내가 그 기능을 접두사로 붙이면,outputLoadingDetails와 함께export이 파일을 모듈로 변환하는 것 같습니다.이제 액세스할 때 컴파일러 오류가 발생합니다.window.myCounter.

interface Window {
    myCounter: number;
}

window.myCounter = window.myCounter || 0; // ERROR: property 'MyCounter' does not exist on type `Window`
++window.myCounter;                       // ERROR: property 'MyCounter' does not exist on type `Window`

export function outputLoadingDetails() {
    console.log(`myCounter= ${window.myCounter}`)  // ERROR: property 'MyCounter' does not exist on type `Window`
}

인터페이스 선언이 더 이상 글로벌을 확장하지 않는 것 같습니다.Window유형.

한 가지 해결 방법은 인터페이스 선언을 별도로 입력하는 것입니다.*.d.ts파일을 작성하고 제 모듈에서 이를 참조하십시오.

그런데 지금 궁금해요.제가 연장할 수 있는 방법이 있을까요?Window모듈 코드 내의 인터페이스?

예, 인터페이스를 글로벌 선언으로 묶기만 하면 됩니다.

declare global {
    interface Window {
        myCounter: number;
    }
}

모듈을 사용하여 글로벌 범위를 확장할 수 있습니다.declare global선언문

자세한 내용은 여기에 있습니다.

---

파일이 모듈로 취급되는지 확인합니다.import또는export문, 그렇지 않은 경우 - 빈 항목을 추가할 수 있습니다.export {})

나는 수정하는 것을 좋아하지 않았습니다.global다른 파일에 수정 사항으로 선언합니다.

이것이 제 해결책이었습니다.

interface customWindow extends Window {
  customProperty?: any;
}

declare const window: customWindow;

/* ... */

window.customProperty

언급URL : https://stackoverflow.com/questions/47130406/extending-global-types-e-g-window-inside-a-typescript-module