Wie legt man in TypeScript explizit eine neue Eigenschaft für "Fenster" fest?

Question

Ich richte globale Namensräume für meine Objekte ein, indem ich explizit eine Eigenschaft auf window .

window.MyNamespace = window.MyNamespace || {};

TypeScript unterstreicht MyNamespace und beschwert sich darüber:

Die Eigenschaft 'MyNamespace' existiert nicht auf valu any"

Ich kann den Code zum Laufen bringen, indem ich deklariere MyNamespace als Umgebungsvariable und das Weglassen der window aber das will ich nicht.

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

Wie kann ich die window einfügen und TypeScript glücklich machen?

Als Randbemerkung finde ich es besonders lustig, dass TypeScript sich beschwert, da es mir sagt, dass window ist vom Typ any die durchaus alles enthalten kann.

Answer 1

[2022]:Wir müssen das "window" Objekt in unserem React oder Nextjs Projekt erweitern. Wir können den folgenden Schritt verwenden, um dieses Problem zu lösen.

• Erstellen Sie einen Ordner innerhalb des Ordners src mit dem Namen types.

• Erstellen Sie eine Datei im Ordner "types" mit dem Namen index.d.ts

• schreiben Sie diesen Code in die Datei index.d.ts.

  export {};
   declare global {
     interface Window {
      NameSpace: any;
     }
  
   }
   window.NameSpace= window.NameSpace|| {};

diese Datei speichern.

Nun noch eine letzte Änderung.

Ändern Sie die " tsConfig.json "um sowohl den Knotenmodultyp als auch unsere Typen zu erben.

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

Answer 2

Vollständige und kurze Antwort

1- Hinzufügen typeRoots Eigenschaft zu tsconfig.json :

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

2- Erweitern Window Typ

// file: src/@types/global.d.ts

declare global {
    interface Window { customProperty: <type>; }
}

Answer 3

Als Hinweis (dies ist die richtige Antwort):

Im Inneren eines .d.ts Definitionsdatei

type MyGlobalFunctionType = (name: string) => void

Wenn Sie im Browser arbeiten, fügen Sie dem Fensterkontext des Browsers Mitglieder hinzu, indem Sie die Fensteroberfläche erneut öffnen:

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

Die gleiche Idee für Node.js:

declare module NodeJS {
  interface Global {
    myGlobalFunction: MyGlobalFunctionType
  }
}

Jetzt deklarieren Sie die Root-Variable (die tatsächlich auf Fenster oder global leben wird):

declare const myGlobalFunction: MyGlobalFunctionType;

Dann wird in einem regulären .ts Datei, sondern importiert als Nebeneffekt, Sie implementieren es tatsächlich:

global/* or window */.myGlobalFunction = function (name: string) {
  console.log("Hey !", name);
};

Und schließlich verwenden Sie es an anderer Stelle in der Codebasis, entweder mit:

global/* or window */.myGlobalFunction("Kevin");

myGlobalFunction("Kevin");

Answer 4

Für diejenigen, die eine berechnete oder dynamische Eigenschaft in der window Objekts, so ist dies mit dem declare global Methode. Zur Verdeutlichung für diesen Anwendungsfall

window[DynamicObject.key] // Element implicitly has an 'any' type because type Window has no index signature

Sie könnten versuchen, wie folgt vorzugehen

declare global {
  interface Window {
    [DyanmicObject.key]: string; // error RIP
  }
}

Die obigen Angaben werden jedoch fehlerhaft sein. Das liegt daran, dass Schnittstellen in TypeScript nicht gut mit berechneten Eigenschaften zusammenspielen und einen Fehler auslösen wie

A computed property name in an interface must directly refer to a built-in symbol

Um dies zu umgehen, können Sie den Vorschlag machen, Folgendes zu verwenden window a <any> damit Sie das tun können

(window as any)[DynamicObject.key]

Answer 5

Erstellen Sie eine benutzerdefinierte Schnittstelle, die das Fenster erweitert, und fügen Sie Ihre benutzerdefinierte Eigenschaft als optional hinzu.

Dann lassen Sie das customWindow die benutzerdefinierte Schnittstelle verwenden, aber mit dem ursprünglichen Fenster bewertet.

Es hat mit TypeScript 3.1.3 funktioniert.

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {}