window.matchMedia 更改事件对象的 Typescript 类型

Question

我聆听window.matchMedia变化

\n

我有这个错误：Parameter 'event' implicitly has an 'any' type.

\n

我应该在此处为对象指定什么 TS 类型event？

\n

const mobileMediaQuery = window.matchMedia("(max-width: 699px)");\nmobileMediaQuery?.addEventListener("change", processViewSizeChange);\n\nfunction processViewSizeChange(event) {\n  console.log('media query changed! \xe2\x86\x92', event.matches);\n}\n

\n

在互联网上哪里可以查找打字稿全局类型？以防我将来需要找到类似的东西。

\n

Answer 1

您可以使用 TypeScript 来了解您需要的类型。这是您的案例的一个例子。您知道您需要提供"change"事件类型，并且需要为侦听器提供回调函数，但您不确定如何键入回调函数，因此首先将其省略：

\n

const mobileMediaQuery = window.matchMedia(\'(max-width: 699px)\');\nmobileMediaQuery.addEventListener(\'change\', ); /*               \n                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n          Expected 2-3 arguments, but got 1.(2554) */\n

\n

如果您不包含第二个参数mobileMediaQuery.addEventListener，您将得到类似的编译器错误诊断信息。

\n

但如果您使用的 IDE 包含 TypeScript 语言服务器和 IntelliSense 之类的东西（例如VS Code或TypeScript Playground），您可以将鼠标悬停在该addEventListener方法上以查看其签名：

\n

(method) MediaQueryList.addEventListener<"change">(type: "change", listener: (this: MediaQueryList, ev: MediaQueryListEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void (+1 overload)\n

\n

从签名中可以看出，listener是第二个参数，监听器中事件参数的类型是MediaQueryListEvent。所以你可以像这样输入你的监听器函数：

\n

(method) MediaQueryList.addEventListener<"change">(type: "change", listener: (this: MediaQueryList, ev: MediaQueryListEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void (+1 overload)\n

\n

TS Playground 的最终代码

\n