Member-only story
This week, I spent some time learning Typescript out of curiosity, and as a hands-on learner, I decided to exercise what I was learning from the Typescript documentation by migrating one of my old hackathon projects from pure JS to Typescript. While doing this, the type system actually caught a few bugs in my original code, but I stumbled upon a really interesting problem when attempting to serialize an ES6 Map, which extended to serializing ES6 classes (which Typescript extends with its type system). After some googling, I found a bunch of libraries and solutions that addressed this problem, but I wanted to try to implement a solution in order to understand what was going on.
Author’s note: I apologize that a lot of the code snippets are screenshots that aren’t copyable (and bad for accessibility). Each code snippet I am showing here is available in the repository where this test code is stored.
Background Context
The project I was migrating was an old hackathon project of mine: https://github.com/penumbragames/tankanarchy
This is a multiplayer browser game written entirely in JavaScript and utilizes socket.io to transmit player input and game state between the clients and server.
Underneath the hood, socket.io stringifies every object that it sends over the wire using JSON.stringify when it sends packets.