Cách mở rộng giao diện kiểu chữ 'Cửa sổ'

Question

Trong ví dụ của tôi, tôi đang cố gắng mở rộng giao diện TS Window để bao gồm một polyfill cho fetch. Tại sao không quan trọng. Câu hỏi đặt ra là "làm thế nào để tôi nói với TS rằng window.fetch là một chức năng hợp lệ?"

tôi đang làm điều này trong VS Mã, v.0.3.0 mà đang chạy TS v.1.5 (IIRC).

tuyên bố giao diện bên trong tập tin lớp TS của tôi, nơi tôi muốn sử dụng nó không hoạt động:

///<reference path="typings/tsd.d.ts"/> 

interface Window { 
    fetch:(url: string, options?: {}) => Promise<any> 
} 
... 
window.fetch('/blah').then(...); // TS objects that window doesn't have fetch 

Nhưng đó là OK nếu tôi tuyên bố giao diện này tương tự trong một ".d.ts" riêng và tham khảo nó trong tệp lớp TS của tôi.

Đây là "typings/window.extend.d.ts"

///<reference path="es6-promise/es6-promise"/> 
interface Window { 
    fetch:(url: string, options?: {}) => Promise<any> 
} 

Bây giờ tôi có thể sử dụng nó trong TS tập tin lớp học của tôi:

///<reference path="typings/window.extend.d.ts"/> 
... 
window.fetch('/blah').then(...); // OK 

Ngoài ra, tôi có thể viết một giao diện mở rộng với một tên khác là trong tệp lớp TS của tôi và sau đó sử dụng nó trong một dàn diễn viên:

interface WindowX extends Window { 
    fetch:(url: string, options?: {}) => Promise<any> 
} 
... 
(<WindowX> window).fetch('/blah').then(...); // OK 

Tại sao việc mở rộng giao diện hoạt động trong "d.ts" nhưng không phải là tại chỗ?

Tôi có thực sự phải trải qua những vòng quay này không?

Answer 1

Khi bạn có một cấp cao nhất import hoặc export trong tập tin của bạn (mà bạn phải nơi nào đó để được có vấn đề này), tập tin của bạn là một bên ngoài mô-đun.

Trong mô-đun bên ngoài, việc khai báo giao diện luôn tạo một loại mới thay vì tăng thêm giao diện toàn cầu hiện có. Điều này bắt chước hành vi chung của bộ nạp mô-đun - những thứ được khai báo trong tệp này không hợp nhất hoặc can thiệp vào mọi thứ trong phạm vi toàn cục.

Lý do cho phép hồi chuyển này là nếu không sẽ không có cách nào, trong mô-đun bên ngoài, hãy xác định các biến hoặc loại mới có cùng tên với các biến trong phạm vi toàn cục.

Answer 2

Bạn cần declare global

declare global { 
    interface Window { 
    fetch:(url: string, options?: {}) => Promise<any> 
    } 
} 

này hoạt động thì:

window.fetch('/blah').then(...);