TypeScript中WebSocket的onmessage回调参数适配问题咨询

核心原因拆解 #

1. TypeScript的this: WebSocket是类型注解，不参与运行 #

TypeScript里的this: WebSocket只是类型约束工具，编译成JavaScript时会被完全移除，不会出现在最终执行的代码里。

比如你写的TS代码：

socket.onmessage = function(this: WebSocket, ev: MessageEvent<any>) {
  console.log(this.readyState, ev.data);
};

编译后的JS代码会自动剔除this的类型注解，变成：

socket.onmessage = function(ev) {
  console.log(this.readyState, ev.data);
};

所以实际运行的函数始终只有一个参数。

2. 浏览器原生WebSocket的回调调用逻辑 #

浏览器在触发onmessage事件时，只会做两件事：

• 给回调函数传入一个参数：MessageEvent实例；
• 通过call()/apply()方法，把回调函数内部的this绑定到当前的WebSocket实例上。

换句话说，浏览器的调用逻辑类似于：

socket.onmessage.call(socket, messageEvent);

3. JavaScript函数的参数容错机制 #

JS函数不强制要求定义的参数数量和调用时传入的数量一致：

• 如果你定义的函数只接收ev一个参数，直接就能拿到传入的MessageEvent；
• 如果你在TS里写了this: WebSocket的类型注解（编译后消失），实际运行时函数还是只接收一个参数，this是通过绑定而非参数传递的，所以不会有参数不匹配的问题。

总结 #

• TypeScript的this参数只是类型层面的提示，和运行时的参数传递无关；
• 浏览器始终只会给onmessage回调传递一个MessageEvent参数，同时绑定this到WebSocket实例；
• 两种写法能正常运行，本质是因为TS编译后的JS代码都符合浏览器的回调调用逻辑。

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