TypeScript 오류: 속성 'X'가 'Window' 유형에 없음

TypeScript 오류: 속성 'X'가 'Window' 유형에 없음

내 React/Redex 앱에 TS를 추가했다.

나는 사용한다window내 앱에서 다음과 같은 개체:

componentDidMount() {
  let FB = window.FB;
}

TS에서 오류 발생:

TypeScript 오류: 속성 'FB'가 'Window' 유형에 없음.TS2339

나는 오류를 수정하고 싶다.

1 (잘 안 된다)

// Why doesn't this work? I have defined a type locally

type Window = {
  FB: any
}

componentDidMount() {
  let FB = window.FB;
}

// TypeScript error: Property 'FB' does not exist on type 'Window'. TS2339

2 (오류 발생 시)

나는 여기서 답을 찾았다 https://stackoverflow.com/a/56402425/1114926.

declare const window: any;

componentDidMount() {
  let FB = window.FB;
}
// No errors, works well

내가 FB 속성을 전혀 명시하지 않았는데도 왜 첫 번째 버전은 작동하지 않는가?

왜 그럴까?declare const window: any;일해?

유형의 로컬 변수를 선언하기 때문에any.유형의 것을 가지고 있다.any기본적으로 유형 검사 실행 중지window뭐든지 할 수 있게 말이야나는 정말 이 해결책을 추천하지 않아, 정말 나쁜 방법이야.

왜 안 되지?유형을 정의하는 경우Window모듈에 정의된 경우 이 유형은 글로벌 유형과 관련이 없음window객체, 그것은 우연히 불리게 되는 유형일 뿐이다.Window모듈 내부.

확장하기에 좋은 솔루션window글로벌을 확장해야 함Window접점이렇게 하면 된다.

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

let FB = window.FB; // ok now

이 확장자는 정의한 파일뿐만 아니라 전체 프로젝트에서 사용할 수 있다는 점에 유의하십시오.또한 만약FB좀 더 잘 입력할 수 있는 정의가 있음(FB: typeof import('FBOrWhateverModuleNameThisHas'))

이 문제를 해결하는 몇 가지 방법이 있다.

예를 들면 다음과 같다.

1-) 캐스팅:

(window as any).X

2-) react-app-env.d.ts 파일에 다음 코드를 넣으십시오.

interface Window {
  X?: {
    Y?: {
      .......
    }
  }
}

당신은 선언할 필요 없이 문제를 쉽게 해결할 수 있다.

window["FB"]

글로벌 선언 없이 이것을 사용한다.

declare const window: Window &
   typeof globalThis & {
     FB: any
   }

더 나은

declare global {
  interface Window {
    FB: {
      CustomerChat: {
        hide: () => void;
        show: () => void;
      };
    };
  }
}

참조URL: https://stackoverflow.com/questions/56457935/typescript-error-property-x-does-not-exist-on-type-window