TypeScript'teki `pencere` üzerinde açıkça yeni bir özelliği nasıl ayarlarsınız?

Açıkça bir özellik ayarlayarak nesnelerim için genel ad alanları oluşturdum window.

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

TypeScript aşağıdakilerin altını çizer MyNamespaceve şikayet eder:

'Window' any 'türünün değerinde' MyNamespace 'özelliği yok

Ben MyNamespacebir ortam değişkeni olarak ilan ve açıklık bırakarak kod çalışması yapabilirsiniz windowama bunu yapmak istemiyorum.

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

Nasıl tutabilir windoworada ve typescript mutlu edecek mi?

Bir yan not olarak, TypeScript'in şikayet etmesini özellikle komik buluyorum çünkü bana kesinlikle bir şey içerebilecek windowtipte olduğunu söylüyor any.

Bunun cevabını başka bir StackOverflow sorusunun cevabında buldum .

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

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

Temel olarak window, yeni mülkünüz hakkında bilgi vermek için mevcut arayüzü genişletmeniz gerekir .

Dinamik tutmak için şunu kullanın:

(<any>window).MyNamespace

TYPESCRIPT ^ 3.4.3'DEN BU ÇÖZÜM ARTIK DAHA ÇALIŞMAZ

Veya...

sadece şunu yazabilirsiniz:

window['MyNamespace']

ve bir derleme hatası almayacaksınız ve yazmakla aynı şekilde çalışıyor window.MyNamespace

TSX mi kullanıyorsunuz? Diğer cevapların hiçbiri benim için işe yaramıyordu.

İşte yaptım:

(window as any).MyNamespace

Kabul ettiğim cevap eskiden kullandığım şeydi, ancak TypeScript 0.9. * İle artık çalışmıyor. WindowArayüzün yeni tanımı , genişletmek yerine yerleşik tanımın yerini alıyor gibi görünüyor.

Bunun yerine bunu yaptım:

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

declare var window: MyWindow;

GÜNCELLEME: TypeScript 0.9.5 ile kabul edilen cevap tekrar çalışır.

Küresel "kötü" :), ben de taşınabilirlik için en iyi yolu olduğunu düşünüyorum:

Önce arayüzü dışa aktarın: (örneğin: ./custom.window.ts)

export interface CustomWindow extends Window {
    customAttribute: any;
}

İkincisi içe aktardığınızda

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

CustomWindow ile üçüncü döküm global değişken penceresi

declare let window: CustomWindow;

Bu şekilde, pencere nesnesinin varolan öznitelikleriyle kullanıyorsanız, farklı IDE'de kırmızı çizginiz olmaz, bu nedenle sonunda şunu deneyin:

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

Typcript 2.4.x ve en yenisi ile test edildi!

windowNesneyi, kullanımını gerektiren özel bir türle genişletmeniz gerekiyorsa import, aşağıdaki yöntemi kullanabilirsiniz:

window.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

El Kitabının 'Bildiri Birleştirme' bölümündeki 'Küresel Büyütme' bölümüne bakın: https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation

Açısal CLI kullananlar için basittir:

src / polyfills.ts

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

benim-özel-utils.ts

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

IntelliJ kullanıyorsanız, yeni çoklu dolgularınız toplanmadan önce IDE'de aşağıdaki ayarı değiştirmeniz gerekir:

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

Bunu çok sık yapmama gerek yok, Redux Devtools'u ara katman yazılımı ile kullanırken oldu.

Ben sadece yaptım:

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

Veya şunları yapabilirsiniz:

let myWindow = window as any;

ve sonra myWindow.myProp = 'my value';

Diğer cevapların çoğu mükemmel değil.

• Bazıları sadece dükkan için tür çıkarımını bastırır.
• Diğerleri sadece global değişkenin isim alanı olduğunu umuyor, arayüz / sınıf olarak değil

Ben de bu sabah benzer bir sorunla karşılaşıyorum. SO üzerinde çok fazla "çözüm" denedim, ancak hiçbiri kesinlikle hiçbir tip hatası üretmiyor ve IDE'de (webstorm veya vscode) tetikleme türünü etkinleştiriyor.

Sonunda, buradan

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

, Arabirim / sınıf ve ad alanı olarak hareket eden global değişken için yazımları eklemek için makul bir çözüm buluyorum .

Örnek aşağıdadır:

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

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

Şimdi, yukarıdaki kod, ad alanının MyNamespaceve arabirimin tiplerini MyNamespaceglobal değişkene myNamespace(pencerenin özelliği) birleştirir.

Yanıtları bulduktan sonra, bu sayfanın yardımcı olabileceğini düşünüyorum. https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation Bildiri birleştirme geçmişinden emin değilim, ancak aşağıdakilerin neden işe yarayacağını açıklıyor.

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

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

TypeScript Definition Manager kullanıyorsanız, bunu nasıl yapacağınız aşağıda açıklanmıştır !

npm install typings --global

Oluşturun typings/custom/window.d.ts:

interface Window {
  MyNamespace: any;
}

declare var window: Window;

Özel yazınızı yükleyin:

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

Bitti, kullan‌ ! Daktilo yazımı artık şikayet etmeyecek:

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

Typscript, dize özellikleri üzerinde typecheck yapmaz.

window["newProperty"] = customObj;

İdeal olarak, küresel değişken senaryosundan kaçınılmalıdır. Tarayıcı konsolunda bir nesnede hata ayıklamak için bazen kullanıyorum.

global.d.tsÖrn. Adlı bir dosya oluşturun, /src/@types/global.d.tssonra şöyle bir arayüz tanımlayın:

interface Window {
  myLib: any
}

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

Typescript 3.x kullanıyorsanız declare global, diğer yanıtlardaki bölümü atlayabilir ve bunun yerine şunları kullanabilirsiniz:

interface Window {
  someValue: string
  another: boolean
}

Typescript 3.3, WebPack ve TSLint kullanırken bu benimle çalıştı.

Referans için (bu doğru cevaptır):

Bir .d.tstanım dosyasının içinde

type MyGlobalFunctionType = (name: string) => void

Tarayıcıda çalışıyorsanız, Window'un arayüzünü yeniden açarak tarayıcının pencere bağlamına üye eklersiniz:

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

Aynı fikir NodeJS için:

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

Şimdi kök değişkenini (aslında pencerede veya global olarak yaşayacak) beyan edersiniz

declare const myGlobalFunction: MyGlobalFunctionType;

Sonra normal bir .tsdosyada, ancak yan etki olarak içe aktarılırsa, gerçekte uygularsınız:

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

Ve son olarak, kod tabanında başka bir yerde kullanın:

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

myGlobalFunction("Kevin");

Özel bir arayüz yapmak Pencereyi genişletir ve isteğe bağlı olarak özel mülkünüzü ekleyin.

Ardından, özel arabirimi kullanan ancak orijinal penceresiyle değerlenen customWindow'a izin verin.

Typescript@3.1.3 ile çalıştı.

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {} 

windowNesne üzerinde hesaplanmış veya dinamik bir özellik ayarlamak isteyenler için , declare globalyöntemle mümkün olmadığını göreceksiniz . Bu kullanım durumunu açıklığa kavuşturmak için

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

Böyle bir şey yapmaya çalışabilirsiniz

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

Yukarıdaki hata olsa. Bunun nedeni, Typcript'te, arabirimlerin hesaplanan özelliklerle iyi oynamaması ve aşağıdaki gibi bir hata atmasıdır.

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

Bunu aşmak windowiçin , döküm önerisiyle <any>gidebilirsiniz.

(window as any)[DynamicObject.key]

Create-tepki-uygulama v3.3 kullanarak bunu elde etmenin en kolay yolunu Windowotomatik oluşturulan türü genişletmek olduğunu buldum react-app-env.d.ts:

interface Window {
    MyNamespace: any;
}

Öncelikle pencere nesnesini geçerli kapsamda bildirmeniz gerekir.
Çünkü typescript nesnenin türünü bilmek istiyor.
Pencere nesnesi başka bir yerde tanımlandığından, yeniden tanımlayamazsınız.
Ancak şu şekilde beyan edebilirsiniz: -

declare var window: any;

Bu, pencere nesnesini yeniden tanımlamaz veya adıyla başka bir değişken oluşturmaz window.
Bu, pencerenin başka bir yerde tanımlandığı ve yalnızca geçerli kapsamda başvurduğunuz anlamına gelir.

Sonra MyNamespace nesnenize basitçe başvurabilirsiniz: -

window.MyNamespace

Veya windowsadece nesne üzerinde yeni özelliği ayarlayabilirsiniz : -

window.MyNamespace = MyObject

Ve şimdi daktilo şikayet etmeyecek.

Bunu bugün bir Açısal (6) kütüphanede kullanmak istedim ve beklediğim gibi çalışması biraz zaman aldı.

Kütüphanemin bildirimleri kullanabilmesi için d.ts, global nesnenin yeni özelliklerini bildiren dosyanın uzantısını kullanmak zorunda kaldım .

Sonuçta, dosya şöyle bir şeyle sonuçlandı:

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

Bir kez oluşturulduktan sonra, onu açığa çıkarmayı unutmayın public_api.ts.

Bunu benim için yaptı. Bu yardımcı olur umarım.