คุณจะตั้งค่าคุณสมบัติใหม่บน `window` ใน TypeScript ได้อย่างไร?

การติดตั้งผม namespaces windowทั่วโลกสำหรับวัตถุของฉันอย่างชัดเจนโดยการตั้งค่าสถานที่ให้บริการใน

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

TypeScript ขีดเส้นใต้MyNamespaceและบ่นว่า:

คุณสมบัติ 'MyNamespace' ไม่มีอยู่ในค่าประเภท 'window' any "

ฉันสามารถทำให้โค้ดทำงานได้โดยการประกาศMyNamespaceว่าเป็นตัวแปรแอมเบียนต์และวางwindowexplicitness แต่ฉันไม่ต้องการทำเช่นนั้น

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

ฉันจะเก็บไว้ที่windowนั่นและทำให้ TypeScript มีความสุขได้อย่างไร

ในฐานะที่เป็นบันทึกด้านข้างฉันพบว่ามันตลกเป็นพิเศษที่ TypeScript บ่นเพราะมันบอกฉันว่าwindowมันเป็นประเภทanyที่โดยแน่นอนสามารถมีอะไร

พบเพียงคำตอบนี้ในคำตอบอื่นคำถาม StackOverflow ของ

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

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

โดยทั่วไปคุณจะต้องขยายwindowส่วนต่อประสานที่มีอยู่เพื่อแจ้งให้ทราบเกี่ยวกับคุณสมบัติใหม่ของคุณ

หากต้องการให้มันคงอยู่เพียงใช้:

(<any>window).MyNamespace

ตามประเภท ^ 3.4.3 โซลูชันนี้ไม่ทำงานอีกต่อไป

หรือ...

คุณสามารถพิมพ์:

window['MyNamespace']

และคุณจะไม่ได้รับข้อผิดพลาดในการคอมไพล์และทำงานเหมือนกับการพิมพ์ window.MyNamespace

ใช้ TSX หรือไม่ ไม่มีคำตอบอื่นใดที่เหมาะกับฉัน

นี่คือสิ่งที่ฉันทำ:

(window as any).MyNamespace

คำตอบที่ยอมรับคือสิ่งที่ฉันเคยใช้ แต่ด้วย TypeScript 0.9. * มันใช้งานไม่ได้อีกต่อไป คำจำกัดความใหม่ของWindowอินเทอร์เฟซดูเหมือนว่าจะแทนที่คำจำกัดความในตัวทั้งหมดแทนที่จะเติมมัน

ฉันได้ทำสิ่งนี้แทน:

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

declare var window: MyWindow;

UPDATE:ด้วย TypeScript 0.9.5 คำตอบที่ยอมรับจะใช้งานได้อีกครั้ง

ทั่วโลกเป็น "ความชั่วร้าย" :) ฉันคิดว่าวิธีที่ดีที่สุดในการพกพาก็คือ:

ก่อนอื่นให้คุณส่งออกอินเทอร์เฟซ: (เช่น: ./custom.window.ts)

export interface CustomWindow extends Window {
    customAttribute: any;
}

ที่สองคุณนำเข้า

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

โยนหน้าต่างย่อยส่วนกลางแบบที่สามด้วย CustomWindow

declare let window: CustomWindow;

ด้วยวิธีนี้คุณจะไม่มีเส้นสีแดงใน IDE ที่แตกต่างกันถ้าคุณใช้กับคุณลักษณะที่มีอยู่ของวัตถุหน้าต่างดังนั้นในตอนท้ายลอง:

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

ทดสอบกับ typescript 2.4.x และใหม่ล่าสุด!

หากคุณต้องการขยายwindowวัตถุด้วยประเภทที่กำหนดเองที่ต้องใช้importคุณสามารถใช้วิธีการต่อไปนี้:

window.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

ดู 'การเพิ่มทั่วโลก' ในส่วน 'การประกาศการรวม' ของคู่มือ: https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation

สำหรับผู้ใช้งานAngular CLIมันตรงไปตรงมา:

src / polyfills.ts

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

ฉัน-กำหนดเอง utils.ts

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

หากคุณกำลังใช้ IntelliJ คุณต้องเปลี่ยนการตั้งค่าต่อไปนี้ใน IDE ก่อนที่จะรับไฟล์ polyfills ใหม่:

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

ฉันไม่จำเป็นต้องทำสิ่งนี้บ่อยครั้งสิ่งเดียวที่ฉันมีคือเมื่อใช้ Redux Devtools กับมิดเดิลแวร์

ฉันทำ:

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

หรือคุณสามารถทำ:

let myWindow = window as any;

แล้ว myWindow.myProp = 'my value';

คำตอบอื่น ๆ ส่วนใหญ่ไม่สมบูรณ์

• บางคนก็ระงับการอนุมานประเภทสำหรับร้านค้า
• บางคนสนใจเฉพาะตัวแปรโกลบอลเป็นเนมสเปซ แต่ไม่เป็นอินเทอร์เฟซ / คลาส

ฉันพบปัญหาที่คล้ายกันเมื่อเช้านี้ ฉันพยายาม "แก้ปัญหา" จำนวนมากบน SO แต่ไม่มีข้อผิดพลาดประเภทใดเลยและเปิดใช้งานการข้ามประเภทการเรียกใน IDE (webstorm หรือ vscode)

ในที่สุดจากที่นี่

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

ฉันหาวิธีแก้ไขที่เหมาะสมเพื่อแนบ typings สำหรับตัวแปรทั่วโลกซึ่งทำหน้าที่เป็น interface / class และ namespace ทั้งสองทั้ง

ตัวอย่างด้านล่าง:

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

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

ตอนนี้โค้ดข้างต้นผสานการพิมพ์เนมสเปซMyNamespaceและอินเทอร์เฟซMyNamespaceลงในตัวแปรโกลบอลmyNamespace(คุณสมบัติของหน้าต่าง)

หลังจากค้นหาคำตอบแล้วฉันคิดว่าหน้านี้อาจมีประโยชน์ https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation ไม่แน่ใจเกี่ยวกับประวัติของการประกาศการรวม แต่มันอธิบายว่าทำไมการทำงานต่อไปนี้ถึงได้

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

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

นี่คือวิธีการทำถ้าคุณใช้TypeScript Definition Manager !

npm install typings --global

สร้างtypings/custom/window.d.ts:

interface Window {
  MyNamespace: any;
}

declare var window: Window;

ติดตั้งการพิมพ์แบบกำหนดเองของคุณ:

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

เสร็จแล้วใช้มัน! typescript จะไม่บ่นอีกต่อไป:

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

Typscript ไม่ดำเนินการตรวจสอบชนิดกับคุณสมบัติสตริง

window["newProperty"] = customObj;

เป็นการดีที่ควรหลีกเลี่ยงสถานการณ์ที่เกิดขึ้นทั่วโลก ฉันใช้มันบางครั้งเพื่อดีบักวัตถุในคอนโซลของเบราว์เซอร์

สร้างไฟล์ชื่อglobal.d.tsเช่น/src/@types/global.d.tsนั้นกำหนดอินเตอร์เฟสเช่น:

interface Window {
  myLib: any
}

อ้างอิง: https://www.typescriptlang.org/docs/handbook/declaration-files/templates/global-d-ts.html

หากคุณใช้ Typescript 3.x คุณอาจไม่สามารถใช้declare globalส่วนที่เหลือในคำตอบอื่น ๆ ได้และใช้แทน:

interface Window {
  someValue: string
  another: boolean
}

สิ่งนี้ใช้ได้กับฉันเมื่อใช้ Typescript 3.3, WebPack และ TSLint

สำหรับการอ้างอิง (นี่คือคำตอบที่ถูกต้อง):

ภายใน.d.tsไฟล์คำจำกัดความ

type MyGlobalFunctionType = (name: string) => void

หากคุณทำงานในเบราว์เซอร์คุณเพิ่มสมาชิกในบริบทหน้าต่างของเบราว์เซอร์โดยเปิดอินเทอร์เฟซของหน้าต่างใหม่:

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

แนวคิดเดียวกันสำหรับ NodeJS:

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

ตอนนี้คุณประกาศตัวแปรรูท (ที่จริงจะอยู่บนหน้าต่างหรือทั่วโลก)

declare const myGlobalFunction: MyGlobalFunctionType;

จากนั้นใน.tsไฟล์ปกติแต่นำเข้าเป็นผลข้างเคียงคุณจะใช้งานจริง:

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

และในที่สุดก็ใช้มันที่อื่นใน codebase ด้วย:

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

myGlobalFunction("Kevin");

ทำให้ส่วนต่อประสานที่กำหนดเองขยายหน้าต่างและเพิ่มคุณสมบัติที่กำหนดเองของคุณเป็นตัวเลือก

จากนั้นให้ customWindow ที่ใช้อินเทอร์เฟซที่กำหนดเอง แต่ให้คุณค่ากับหน้าต่างเดิม

มันทำงานร่วมกับ typescript@3.1.3

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {} 

สำหรับผู้ที่ต้องการตั้งค่าคุณสมบัติการคำนวณหรือแบบไดนามิกบนwindowวัตถุที่คุณจะพบว่าไม่เป็นไปได้ด้วยdeclare globalวิธีการ เพื่อชี้แจงกรณีการใช้งานนี้

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

คุณอาจพยายามทำอะไรแบบนี้

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

ข้างต้นจะเกิดข้อผิดพลาด นี่เป็นเพราะใน typescript อินเทอร์เฟซไม่เล่นได้ดีกับคุณสมบัติที่คำนวณและจะโยนข้อผิดพลาดเช่น

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

ในการหลีกเลี่ยงสิ่งนี้คุณสามารถไปกับคำแนะนำในการคัดเลือกwindowเพื่อ<any>ให้คุณสามารถทำได้

(window as any)[DynamicObject.key]

การใช้ create-react-app v3.3 ฉันพบวิธีที่ง่ายที่สุดในการบรรลุเป้าหมายนี้คือการขยายWindowประเภทในการสร้างอัตโนมัติreact-app-env.d.ts:

interface Window {
    MyNamespace: any;
}

ก่อนอื่นคุณต้องประกาศวัตถุหน้าต่างในขอบเขตปัจจุบัน
เพราะ typescript ต้องการทราบชนิดของวัตถุ
เนื่องจากวัตถุหน้าต่างถูกกำหนดไว้ที่อื่นคุณจึงไม่สามารถกำหนดได้
แต่คุณสามารถประกาศได้ดังนี้: -

declare var window: any;

นี้จะไม่ redefine windowวัตถุหน้าต่างหรือมันจะไม่สร้างตัวแปรอื่นที่มีชื่อ
ซึ่งหมายความว่าหน้าต่างถูกกำหนดที่อื่นและคุณเพิ่งอ้างอิงในขอบเขตปัจจุบัน

จากนั้นคุณสามารถอ้างถึงวัตถุ MyNamespace ของคุณได้โดย: -

window.MyNamespace

หรือคุณสามารถตั้งค่าคุณสมบัติใหม่บนwindowวัตถุได้ง่ายๆโดย: -

window.MyNamespace = MyObject

และตอนนี้ตัวพิมพ์ดีดจะไม่บ่น

ฉันต้องการใช้สิ่งนี้ในห้องสมุด Angular (6) วันนี้และฉันใช้เวลาสักพักกว่าจะได้ผลตามที่คาดหวัง

เพื่อให้ห้องสมุดของฉันใช้การประกาศฉันต้องใช้ส่วนd.tsขยายสำหรับไฟล์ที่ประกาศคุณสมบัติใหม่ของวัตถุทั่วโลก

ดังนั้นในที่สุดไฟล์ก็จบลงด้วยสิ่งที่ชอบ:

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

public_api.tsเมื่อสร้างแล้วไม่ลืมที่จะเปิดเผยในของคุณ

นั่นทำเพื่อฉัน หวังว่านี่จะช่วยได้