document.querySelector简写函数异常原因及等效实现方案

三种$写法的问题拆解 #

第一种写法：const $ = document.querySelector; #

核心问题是this绑定丢失。document.querySelector作为document对象的方法，调用时内部this指向document本身。但把它赋值给变量$后，调用$()时this会指向全局对象（浏览器中是window），而window未实现Document接口，因此触发TypeError。

第二种写法：const $ = (selector: string) => document.querySelector(selector); #

问题出在参数类型过于宽泛。原document.querySelector是泛型函数，能根据传入的选择器字符串（比如"textarea"）精确推断对应元素类型（HTMLTextAreaElement | null）。但你把参数设为string后，TypeScript无法做精细化类型推断，只能返回最宽泛的Element | null。

第三种写法：const $ = (selector: keyof HTMLElementTagNameMap) => document.querySelector(selector); #

这种写法缩小了参数范围，但未利用泛型传递类型信息。当参数是keyof HTMLElementTagNameMap联合类型时，TypeScript会认为selector可能是任意标签名，因此返回所有标签对应元素类型的联合，而非具体标签的单一类型。

实现与document.querySelector完全等效的$函数 #

要完全复用原方法的类型推断和功能，直接复用它的类型定义并确保this绑定正确即可：

const $: typeof document.querySelector = document.querySelector.bind(document);

也可以手动写泛型函数复刻原逻辑，支持更灵活的类型指定：

// 针对标签名的精确推断
const $ = <K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null => 
  document.querySelector(selector);

// 支持复杂选择器（类、ID等）的通用版本
const $ = <T extends Element>(selector: string): T | null => 
  document.querySelector(selector);

第一种绑定方式最省心，完全继承原方法的所有类型特性，包括复杂选择器的类型推断。

实现document.querySelectorAll的等效简写$$ #

同样需要解决this绑定和类型推断问题，用类似方式处理：

const $$: typeof document.querySelectorAll = document.querySelectorAll.bind(document);

或手动泛型实现：

// 针对标签名的精确推断
const $$ = <K extends keyof HTMLElementTagNameMap>(selector: K): NodeListOf<HTMLElementTagNameMap[K]> => 
  document.querySelectorAll(selector);

// 支持复杂选择器的通用版本
const $$ = <T extends Element>(selector: string): NodeListOf<T> => 
  document.querySelectorAll(selector);

bind(document)确保调用$$()时this指向document，同时复用原方法的类型定义，保证类型推断和原方法完全一致。

内容的提问来源于stack exchange，提问作者Suleyman