reactjs - TypeScript-fel: Egenskapen 'X' finns inte på typen 'Window'

Jag har lagt till TS i min React/Redux-app.

Jag använder window-objektet i min app så här:

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

TS ger ett fel:

TypeScript-fel: Egenskapen 'FB' finns inte på typen 'Window'. TS2339

Jag vill åtgärda felet.

1 (fungerar inte)

// 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 (fixar felet)

Jag hittade svaret här https://stackoverflow.com/a/56402425/1114926

declare const window: any;

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

Varför fungerar inte den första versionen, men den andra gör det, trots att jag inte alls anger FB-egenskapen?

Svar #1

Varför fungerar declare const window: any;?

Eftersom du deklarerar en lokal variabel av typen any. Att ha något av typen any stänger i princip av typkontroll för window så att du kan göra vad som helst med det. Jag rekommenderar verkligen inte denna lösning, det är en riktigt dålig lösning.

Varför fungerar inte type Window={ FB: any }? Du definierar en typ Window. Denna typ, om den definieras i en modul, har ingenting att göra med typen av det globala window-objektet, det är bara en typ som råkar kallas Window inom din modul.

Den bra lösningen För att utöka window måste du utöka det globala Window-gränssnittet. Du kan göra detta så här:

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

let FB = window.FB; // ok now

Observera att denna förlängning kommer att vara tillgänglig i hela ditt projekt, inte bara i filen du definierar den i. Om FB också har definitioner kan du överväga att typa det lite bättre (FB: typeof import('FBOrWhateverModuleNameThisHas'))

Svar #2

Det finns några sätt att lösa detta problem.

Några exempel:

1-) Gör ett gips

(window as any).X

2-) Sätt följande kod i en fil med namnet react-app-env.d.ts

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

Svar #3

du kan lösa problemet lätt utan något behov av deklaration

window["FB"]

UPPDATERING
Eftersom det är en lösning utan någon kompilatorinställning för att säkerställa ditt programs kompatibilitet med TypeScript kanske du bara behöver en typkontroll.

if(window["FB"]) {
  // do some FB logic
}

Svar #4

Lösning för problemet "Egenskap finns inte på typen Window i TypeScript":

STEGET:1 I din src-katalog, skapa en types-katalog som innehåller följande index.d.ts-fil: src/types/index.d.ts

export {};

declare global {
  interface Window {
    example: string; // whatever type you want to give. (any,number,float etc)
  }
}

STEGET: 2 lägg till sökvägen till din types-katalog i din tsconfig.json-fil.

tsconfig.json

{
  "compilerOptions": {
    // ... rest
    "typeRoots": ["./node_modules/@types", "./src/types"]
  }
}

STEGET: 3 Använd det nu, var du än vill göra det.

window.example = 'hello';

console.log(window.example);

Svar #5

Jag använder detta utan att deklarera global

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

Svar #6

Jag stötte på detta problem i min Angular-kod. Nedanstående lösning hjälpte mig att lösa problemet.

Jag löste detta fel genom att skapa en mapp med namnet types inuti src och inuti den mappen skapade jag en index.d.ts-fil.

index.d.ts-filen kommer att ha koden nedan.

export {};
declare global {
  interface Window {
    chrome: any;  // this will be your variable name
  }
}

Om felet kvarstår, försök lägga till sökvägen till din types-katalog i din tsconfig.json-fil.

{
  "compilerOptions": {
    // ... rest
    "typeRoots": ["./node_modules/@types", "./src/types"]
  }
}

Svar #7

det bör ignoreras genom att skapa en global.d.ts-fil i projektets rot med detta innehåll:

export { }
declare global {
    interface Window {
        [key: string]: any 
    }
}

det ignorerar alla variabler av window-objektet

Relaterade artiklar