Làm thế nào để bạn thiết lập rõ ràng một thuộc tính mới trên `window` trong TypeScript?

Tôi thiết lập không gian tên toàn cầu cho các đối tượng của mình bằng cách đặt rõ ràng một thuộc tính window.

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

TypeScript gạch chân MyNamespacevà phàn nàn rằng:

Thuộc tính 'MyNamespace' không tồn tại trên giá trị của loại 'cửa sổ' bất kỳ "

Tôi có thể làm cho mã hoạt động bằng cách khai báo MyNamespacenhư một biến xung quanh và loại bỏ nhân chứng windownhưng tôi không muốn làm điều đó.

declare var MyNamespace: any;

MyNamespace = MyNamespace || {};

Làm thế nào tôi có thể giữ windowtrong đó và làm cho TypeScript hạnh phúc?

Là một lưu ý phụ, tôi thấy thật buồn cười khi TypeScript phàn nàn vì nó nói với tôi rằng đó windowlà loại anymà chắc chắn có thể chứa bất cứ thứ gì.

Chỉ cần tìm câu trả lời cho câu hỏi này trong câu trả lời khác của StackOverflow .

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

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

Về cơ bản, bạn cần mở rộng windowgiao diện hiện có để nói với nó về tài sản mới của bạn.

Để giữ cho nó năng động, chỉ cần sử dụng:

(<any>window).MyNamespace

NHƯ CÁC LOẠI HÌNH ^ 3.4.3 GIẢI PHÁP NÀY KHÔNG CÓ CÔNG TRÌNH NÀO

Hoặc là...

bạn chỉ có thể gõ:

window['MyNamespace']

và bạn sẽ không gặp lỗi biên dịch và nó hoạt động giống như gõ window.MyNamespace

Sử dụng TSX? Không có câu trả lời nào khác làm việc cho tôi.

Đây là những gì tôi đã làm:

(window as any).MyNamespace

Câu trả lời được chấp nhận là những gì tôi từng sử dụng, nhưng với TypeScript 0.9. * Nó không còn hoạt động. Định nghĩa mới của Windowgiao diện dường như thay thế hoàn toàn định nghĩa tích hợp, thay vì tăng nó.

Tôi đã thực hiện để làm điều này thay vào đó:

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

declare var window: MyWindow;

CẬP NHẬT: Với TypeScript 0.9.5, câu trả lời được chấp nhận sẽ hoạt động trở lại.

Toàn cầu là "ác" :), tôi nghĩ cách tốt nhất để có tính di động là:

Trước tiên, bạn xuất giao diện: (ví dụ: ./custom.window.ts)

export interface CustomWindow extends Window {
    customAttribute: any;
}

Thứ hai bạn nhập

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

Cửa sổ var toàn cầu cast thứ ba với CustomWindow

declare let window: CustomWindow;

Theo cách này, bạn cũng không có dòng màu đỏ trong IDE khác nếu bạn sử dụng với các thuộc tính tồn tại của đối tượng cửa sổ, vì vậy cuối cùng hãy thử:

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

Đã thử nghiệm với Bản mô tả 2.4.x và mới nhất!

Nếu bạn cần mở rộng windowđối tượng bằng một loại tùy chỉnh yêu cầu sử dụng, importbạn có thể sử dụng phương pháp sau:

window.d.ts

import MyInterface from './MyInterface';

declare global {
    interface Window {
        propName: MyInterface
    }
}

Xem 'Tăng cường toàn cầu' trong phần 'Kết hợp khai báo' trong Sổ tay: https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-aujectionation

Đối với những người sử dụng CLI góc, điều này rất đơn giản:

src / polyfills.ts

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

my-custom-utils.ts

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

Nếu bạn đang sử dụng IntelliJ, bạn cũng cần thay đổi cài đặt sau trong IDE trước khi nhận các polyfill mới của bạn:

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

Tôi không cần phải làm điều này rất thường xuyên, trường hợp duy nhất tôi gặp phải là khi sử dụng Redux Devtools với phần mềm trung gian.

Tôi chỉ đơn giản là đã làm:

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

Hoặc bạn có thể làm:

let myWindow = window as any;

và sau đó myWindow.myProp = 'my value';

Hầu hết các câu trả lời khác là không hoàn hảo.

• Một số trong số họ chỉ đàn áp các loại suy luận cho cửa hàng.
• Một số khác chỉ quan tâm đến biến toàn cục là không gian tên, nhưng không phải là giao diện / lớp

Tôi cũng gặp phải vấn đề tương tự sáng nay. Tôi đã thử rất nhiều "giải pháp" trên SO, nhưng không có giải pháp nào tạo ra lỗi hoàn toàn và cho phép kích hoạt kiểu nhảy trong IDE (webstorm hoặc vscode).

Cuối cùng, từ đây

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

, Tôi tìm thấy một giải pháp hợp lý để đính kèm các kiểu chữ cho biến toàn cục, hoạt động như cả giao diện / lớp và không gian tên cả .

Ví dụ dưới đây:

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

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

Bây giờ, đoạn mã trên hợp nhất các kiểu chữ của không gian tên MyNamespacevà giao diện MyNamespacevào biến toàn cục myNamespace(thuộc tính của cửa sổ).

Sau khi tìm thấy câu trả lời xung quanh, tôi nghĩ rằng trang này có thể hữu ích. https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-auributionation Không chắc chắn về lịch sử sáp nhập khai báo, nhưng nó giải thích lý do tại sao những điều sau đây có thể hoạt động.

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

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

Đây là cách thực hiện, nếu bạn đang sử dụng Trình quản lý định nghĩa TypeScript !

npm install typings --global

Tạo typings/custom/window.d.ts:

interface Window {
  MyNamespace: any;
}

declare var window: Window;

Cài đặt cách gõ tùy chỉnh của bạn:

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

Xong, sử dụng nó‌ ! Bản đánh máy sẽ không còn phàn nàn nữa:

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

Typscript không thực hiện typecheck trên các thuộc tính chuỗi.

window["newProperty"] = customObj;

Tốt nhất, nên tránh kịch bản biến toàn cục. Đôi khi tôi sử dụng nó để gỡ lỗi một đối tượng trong bảng điều khiển trình duyệt.

Tạo một tệp được gọi là global.d.tseg, /src/@types/global.d.tssau đó xác định một giao diện như:

interface Window {
  myLib: any
}

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

Nếu bạn đang sử dụng Bản mô tả 3.x, bạn có thể bỏ qua declare globalphần trong các câu trả lời khác và thay vào đó chỉ sử dụng:

interface Window {
  someValue: string
  another: boolean
}

Điều này làm việc với tôi khi sử dụng Typecript 3.3, WebPack và TSLint.

Để tham khảo (đây là câu trả lời đúng):

Bên trong một .d.tstệp định nghĩa

type MyGlobalFunctionType = (name: string) => void

Nếu bạn làm việc trong trình duyệt, bạn thêm thành viên vào ngữ cảnh cửa sổ của trình duyệt bằng cách mở lại giao diện của Window:

interface Window {
  myGlobalFunction: MyGlobalFunctionType
}

Ý tưởng tương tự cho NodeJS:

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

Bây giờ bạn khai báo biến gốc (thực sự sẽ sống trên cửa sổ hoặc toàn cầu)

declare const myGlobalFunction: MyGlobalFunctionType;

Sau đó, trong một .tstệp thông thường , nhưng được nhập dưới dạng tác dụng phụ, bạn thực sự triển khai nó:

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

Và cuối cùng sử dụng nó ở nơi khác trong cơ sở mã, với một trong hai:

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

myGlobalFunction("Kevin");

Tạo giao diện tùy chỉnh mở rộng Cửa sổ và thêm thuộc tính tùy chỉnh của bạn làm tùy chọn.

Sau đó, hãy để customWindow sử dụng giao diện tùy chỉnh, nhưng có giá trị với cửa sổ gốc.

Nó hoạt động với typecript@3.1.3.

interface ICustomWindow extends Window {
  MyNamespace?: any
}

const customWindow:ICustomWindow = window;

customWindow.MyNamespace = customWindow.MyNamespace {} 

Đối với những người muốn đặt thuộc tính động hoặc tính toán trên windowđối tượng, bạn sẽ thấy điều đó là không thể với declare globalphương thức. Để làm rõ cho trường hợp sử dụng này

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

Bạn có thể cố gắng làm một cái gì đó như thế này

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

Ở trên sẽ lỗi mặc dù. Điều này là do trong Bản mô tả, các giao diện không chơi tốt với các thuộc tính được tính toán và sẽ gây ra lỗi như

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

Để giải quyết vấn đề này, bạn có thể đi với đề xuất đúc windowđể <any>bạn có thể làm

(window as any)[DynamicObject.key]

Sử dụng tạo-Reac-app v3.3 Tôi thấy cách dễ nhất để đạt được điều này là mở rộng Windowloại trong tự động tạo react-app-env.d.ts:

interface Window {
    MyNamespace: any;
}

Đầu tiên bạn cần khai báo đối tượng cửa sổ trong phạm vi hiện tại.
Bởi vì bản thảo muốn biết loại của đối tượng.
Vì đối tượng cửa sổ được định nghĩa ở một nơi khác nên bạn không thể xác định lại nó.
Nhưng bạn có thể khai báo như sau: -

declare var window: any;

Điều này sẽ không xác định lại đối tượng cửa sổ hoặc nó sẽ không tạo ra một biến khác có tên window.
Điều này có nghĩa là cửa sổ được xác định ở một nơi khác và bạn chỉ tham chiếu nó trong phạm vi hiện tại.

Sau đó, bạn có thể tham khảo đối tượng MyNamespace của mình chỉ bằng cách: -

window.MyNamespace

Hoặc bạn có thể đặt thuộc tính mới trên windowđối tượng chỉ bằng cách: -

window.MyNamespace = MyObject

Và bây giờ bản thảo sẽ không phàn nàn.

Tôi muốn sử dụng nó trong thư viện Angular (6) ngày hôm nay và tôi phải mất một thời gian để làm cho nó hoạt động như mong đợi.

Để thư viện của tôi sử dụng các khai báo, tôi đã phải sử dụng phần d.tsmở rộng cho tệp khai báo các thuộc tính mới của đối tượng toàn cục.

Vì vậy, cuối cùng, tập tin đã kết thúc với một cái gì đó như:

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

Sau khi tạo, đừng quên để lộ nó trong của bạn public_api.ts.

Điều đó đã làm nó cho tôi. Hi vọng điêu nay co ich.