Bagaimana Anda secara eksplisit mengatur properti baru di `window` di TypeScript?

Saya menyiapkan ruang nama global untuk objek saya dengan secara eksplisit menyetel properti window.

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

TypeScript menggarisbawahi MyNamespacedan mengeluh bahwa:

Properti 'MyNamespace' tidak ada pada nilai ketik 'jendela' apa pun "

Saya dapat membuat kode bekerja dengan mendeklarasikan MyNamespacesebagai variabel ambient dan menjatuhkan windowexplicitness tetapi saya tidak ingin melakukan itu.

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

Bagaimana saya bisa tetap windowdi sana dan membuat TypeScript bahagia?

Sebagai catatan saya merasa lucu bahwa TypeScript mengeluh karena memberitahu saya bahwa itu windowadalah tipe anyyang pasti dapat berisi apa saja.

Baru saja menemukan jawabannya di jawaban pertanyaan StackOverflow lain .

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

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

Pada dasarnya Anda perlu memperluas windowantarmuka yang ada untuk memberi tahu tentang properti baru Anda.

Untuk membuatnya dinamis, cukup gunakan:

(<any>window).MyNamespace

SEBAGAI MACAM-MACAM KHUSUS ^ 3.4.3 SOLUSI INI TANPA KERJA YANG LEBIH LAMA

Atau...

Anda cukup mengetik:

window['MyNamespace']

dan Anda tidak akan mendapatkan kesalahan kompilasi dan berfungsi sama seperti mengetik window.MyNamespace

Menggunakan TSX? Tidak ada jawaban lain yang bekerja untuk saya.

Inilah yang saya lakukan:

(window as any).MyNamespace

Jawaban yang diterima adalah yang biasa saya gunakan, tetapi dengan TypeScript 0.9. * Tidak lagi berfungsi. Definisi baru dariWindow antarmuka tampaknya sepenuhnya menggantikan definisi built-in, bukan menambahnya.

Saya telah melakukan ini sebagai gantinya:

interface MyWindow extends Window {
    myFunction(): void;
}

declare var window: MyWindow;

UPDATE: Dengan TypeScript 0.9.5 jawaban yang diterima berfungsi lagi.

Global adalah "jahat" :), saya pikir cara terbaik untuk memiliki portabilitas adalah:

Pertama, Anda mengekspor antarmuka: (mis .: ./custom.window.ts)

export interface CustomWindow extends Window {
    customAttribute: any;
}

Kedua, Anda mengimpor

import {CustomWindow} from './custom.window.ts';

Jendela var global cor ketiga dengan CustomWindow

declare let window: CustomWindow;

Dengan cara ini Anda tidak memiliki garis merah di IDE yang berbeda jika Anda menggunakan dengan atribut objek window yang ada, jadi pada akhirnya coba:

window.customAttribute = 'works';
window.location.href = '/works';

Diuji dengan Script 2.4.x dan terbaru!

Jika Anda perlu memperluas windowobjek dengan tipe kustom yang mengharuskan importAnda dapat menggunakan metode berikut:

window.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

Lihat 'Augmentasi Global' di bagian 'Penggabungan Deklarasi' dalam Buku Pegangan: https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation

Bagi mereka yang menggunakan CLI Angular itu mudah:

src / polyfills.ts

declare global {
  interface Window {
    myCustomFn: () => void;
  }
}

my-custom-utils.ts

window.myCustomFn = function () {
  ...
};

Jika Anda menggunakan IntelliJ, Anda juga perlu mengubah pengaturan berikut di IDE sebelum pengambilan polyfill baru Anda:

> File 
> Settings 
> Languages & Frameworks 
> TypeScript 
> check 'Use TypeScript Service'.

Saya tidak perlu melakukan ini terlalu sering, satu-satunya kasus yang saya miliki adalah ketika menggunakan Redux Devtools dengan middleware.

Saya hanya melakukannya:

const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

Atau Anda bisa melakukannya:

let myWindow = window as any;

lalu myWindow.myProp = 'my value';

Sebagian besar jawaban lain tidak sempurna.

• Beberapa dari mereka hanya menekan inferensi tipe untuk toko.
• Beberapa yang lain hanya peduli tentang variabel global sebagai namespace, tetapi tidak sebagai antarmuka / kelas

Saya juga mengalami masalah serupa pagi ini. Saya mencoba begitu banyak "solusi" pada SO, tetapi tidak satupun dari mereka yang tidak menghasilkan kesalahan tipe sama sekali dan memungkinkan pemicu jenis jumping di IDE (webstorm atau vscode).

Akhirnya dari sini

https://github.com/Microsoft/TypeScript/issues/3180#issuecomment-102523512

, Saya menemukan solusi yang masuk akal untuk melampirkan mengetik untuk variabel global yang bertindak sebagai antarmuka / kelas dan namespace keduanya .

Contohnya di bawah ini:

// typings.d.ts
declare interface Window {
    myNamespace?: MyNamespace & typeof MyNamespace
}

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

Sekarang, kode di atas menggabungkan mengetik namespace MyNamespacedan antarmuka MyNamespaceke variabel global myNamespace(properti jendela).

Setelah menemukan jawaban, saya pikir halaman ini mungkin bisa membantu. https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation Tidak yakin tentang sejarah penggabungan deklarasi, tetapi ini menjelaskan mengapa hal berikut bisa bekerja.

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

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

Inilah cara melakukannya, jika Anda menggunakan TypeScript Definition Manager !

npm install typings --global

Buat typings/custom/window.d.ts:

interface Window {
  MyNamespace: any;
}

declare var window: Window;

Pasang pengetikan khusus Anda:

typings install file:typings/custom/window.d.ts --save --global

Selesai, gunakan‌ ! Naskah tidak akan mengeluh lagi:

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

Typscript tidak melakukan typecheck pada properti string.

window["newProperty"] = customObj;

Idealnya, skenario variabel global harus dihindari. Saya menggunakannya kadang-kadang untuk men-debug objek di konsol browser.

Buat file bernama global.d.tseg /src/@types/global.d.tslalu tentukan antarmuka seperti:

interface Window {
  myLib: any
}

ref: https://www.typescriptlang.org/docs/handbook/declaration-files/templates/global-d-ts.html

Jika Anda menggunakan Typecript 3.x, Anda mungkin bisa menghilangkan declare globalbagian dalam jawaban lain dan alih-alih hanya menggunakan:

interface Window {
  someValue: string
  another: boolean
}

Ini bekerja dengan saya ketika menggunakan Typecript 3.3, WebPack dan TSLint.

Untuk referensi (ini adalah jawaban yang benar):

Di dalam .d.tsfile definisi

type MyGlobalFunctionType = (name: string) => void

Jika Anda bekerja di browser, Anda menambahkan anggota ke konteks jendela browser dengan membuka kembali antarmuka Window:

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

Gagasan yang sama untuk NodeJS:

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

Sekarang Anda mendeklarasikan variabel root (yang sebenarnya akan hidup di jendela atau global)

declare const myGlobalFunction: MyGlobalFunctionType;

Kemudian dalam .tsfile biasa , tetapi diimpor sebagai efek samping, Anda benar-benar menerapkannya:

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

Dan akhirnya menggunakannya di tempat lain dalam basis kode, dengan:

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

myGlobalFunction("Kevin");

Buat antarmuka khusus memperluas Window dan menambahkan properti khusus Anda sebagai opsional.

Kemudian, biarkan customWindow yang menggunakan antarmuka kustom, tetapi dihargai dengan jendela asli.

Ini bekerja dengan [email protected].

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {} 

Bagi mereka yang ingin mengatur properti yang dihitung atau dinamis pada windowobjek, Anda akan menemukan bahwa tidak mungkin dengan declare globalmetode ini. Untuk memperjelas kasus penggunaan ini

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

Anda mungkin mencoba melakukan sesuatu seperti ini

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

Namun di atas akan kesalahan. Ini karena dalam naskah, antarmuka tidak bermain dengan baik dengan sifat yang dikomputasi dan akan melempar kesalahan seperti

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

Untuk menyiasati hal ini, Anda dapat pergi dengan menyarankan casting windowuntuk <any>sehingga Anda dapat melakukan

(window as any)[DynamicObject.key]

Menggunakan create-react-app v3.3 Saya menemukan cara termudah untuk mencapai ini adalah dengan memperluas Windowjenis di yang dihasilkan secara otomatis react-app-env.d.ts:

interface Window {
    MyNamespace: any;
}

Pertama, Anda perlu mendeklarasikan objek jendela dalam lingkup saat ini.
Karena naskah ingin mengetahui jenis objek.
Karena objek jendela didefinisikan di tempat lain, Anda tidak dapat mendefinisikannya kembali.
Tetapi Anda dapat mendeklarasikannya sebagai berikut: -

declare var window: any;

Ini tidak akan mendefinisikan ulang objek jendela atau tidak akan membuat variabel lain dengan nama window.
Ini berarti jendela didefinisikan di tempat lain dan Anda hanya merujuknya dalam ruang lingkup saat ini.

Kemudian Anda dapat merujuk ke objek MyNamespace Anda hanya dengan: -

window.MyNamespace

Atau Anda dapat mengatur properti baru pada windowobjek hanya dengan: -

window.MyNamespace = MyObject

Dan sekarang naskah tidak akan mengeluh.

Saya ingin menggunakan ini di perpustakaan Angular (6) hari ini dan butuh beberapa saat untuk menyelesaikannya seperti yang diharapkan.

Agar pustaka saya menggunakan deklarasi, saya harus menggunakan d.tsekstensi untuk file yang menyatakan properti baru dari objek global.

Jadi pada akhirnya, file tersebut berakhir dengan sesuatu seperti:

/path-to-angular-workspace/angular-workspace/projects/angular-library/src/globals.d.ts

Setelah dibuat, jangan lupa untuk mengeksposnya di blog Anda public_api.ts.

Itu berhasil untuk saya. Semoga ini membantu.