用于 window.matchMedia 更改事件对象的 Typescript 类型答案

【问题标题】：Typescript Type for window.matchMedia change event object用于 window.matchMedia 更改事件对象的 Typescript 类型
【发布时间】：2022-01-10 19:39:44
【问题描述】：

我听window.matchMedia的变化

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

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

const mobileMediaQuery = window.matchMedia("(max-width: 699px)");
mobileMediaQuery?.addEventListener("change", processViewSizeChange);

function processViewSizeChange(event) {
  console.log('media query changed! →', event.matches);
}

在 Internet 上哪里可以查找 typescript 全局类型？以防我以后需要找到类似的东西。

【问题讨论】：

也许见MediaQueryListEvent

标签： javascript typescript dom

【解决方案1】：

您可以使用 TypeScript 来了解您需要的类型。这是您的示例。你知道你需要提供"change"事件类型，并且你需要为监听器提供一个回调函数，但是你不知道如何键入回调函数，所以一开始就不用了：

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

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

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

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

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

function processViewSizeChange(event: MediaQueryListEvent): void {
  console.log('media query changed! →', event.matches);
}

Final code at TS Playground

【讨论】：