typescript 给ws添加属性类型报错怎么解决？类型“WebSocket”上不存在属性xxx

Question

代码

const serve = new WebSocketServer({ port: 9999 })
serve.on('connection', function (ws) {
    // 类型“WebSocket”上不存在属性“mydata”
    ws.mydata = '12312312'
}

请问这个怎么处理呀？

Answer 1

ws['mydata'] = '12312312'

或者:

(socket as any).mydata = '123123';

---

由于我不知道你的 Websocket ,是用了哪个库或者是不是自己有维护一份 .d.ts 文件的, 如果是自己维护的, 新增一个 data 属性就好了. 如果是用的第三方的库, 不希望去动他, 那么可以通过声明合并的方式来给它增加 data 属性.

第一种方法是 先找到 Websocket 所属的 namespace 名称( 找到引入 Websocket 的地方, 鼠标放上去 f12 , 或者 ctrl + 鼠标左键 ), 然后新建一个 .d.ts 文件, 添加声明, 比如:

// 我这边不知道你用的库是什么, 所以我直接用我项目里的 Socket.io 代替了
declare namespace SocketIO {
  interface Socket {
    data?: string;
  }
}

第二种方法的话, 可以直接在你的 .ts 模块代码里面, 声明全局的 namespace, 比如:

declare global {
  namespace SocketIO {
    interface Socket {
      data?: string;
    }
  }
}

中文参考文档

Answer 2

这只是typescript的语法检查提示，
serve.on('connection', function (ws:any) {

ws.mydata = '12312312'

};

Answer 3

const serve = new WebSocketServer({ port: 9999 })

WebSocketServer是个class，不能通过定义全局的interface的方法合并原来ws包的定义，你得给WebSocketServer这个class加一个mydata的属性：

global.d.ts

declare class MyWebSocket extends WebSocket {
    public mydata!: string;
    constructor() {
        super();
    }
}

declare namespace MyWebSocket {

    class MyWebSocketServer extends WebSocket.Server {
        constructor(_options?: WebSocket.ServerOptions | undefined, _callback?: (() => void) | undefined) {
            super();
        }

        on(event: 'connection', cb: (this: Server, socket: MyWebSocket, request: http.IncomingMessage) => void): this;
    }
}

export { MyWebSocket };

服务器端：

import { MyWebSocket } from './global';
const serve = new MyWebSocket.MyWebSocketServer({ port: 9999 })

serve.on('connection', function (ws) {
    // 类型“WebSocket”上不存在属性“mydata”
    ws.mydata = '12312312'
}

就不报错了