Game Logic — Part Un — TypeScript

Our app is looking better and better, but we are missing something kinda fundamental: the game itself.

For now, all a user can do is pick cards and that list of cards will be shared amongst everyone. This is of course not what we want.

In order to implement the real logic though, we will need to implement this on the server side and add the relevant endpoints and Socket IO events.

As our code on the server side is going to become more complicated, the limitations of JavaScript are becoming more obvious:

• No type safety
• No intellisense in your IDE
• Lots of mental work to remember the shapes of the various objects to avoid mistakes.

So before going further, we will want to improve on the issues mentioned before, and for that reason, introduce TypeScript on the server.

WTF is TypeScript?

TypeScript is a superset of JavaScript, that transpiles down to JavaScript.

It means that any JavaScript code is also valid in TypeScript (so your project can already be used with TypeScript), and that the TypeScript compiler (well, transpiler really) will convert your TypeScript files into JavaScript, ready to be executed by NodeJS.

Installing TypeScript (commit)

Installing TypeScript requires a bit of work.

First, as usual, you need to install a dependency:

yarn add typescript

Then, for some dependencies, you need to install typings.

What are typings?

Typings are extra packages, installed via NPM (or Yarn), that brings the goodness of TypeScript to existing vanilla JavaScript dependencies.

For instance, lodash wasn’t built with TypeScript, and by installing @types/lodash, you will bring intellisense functionality to Lodash automatically.

This is not compulsory, but recommended to get the most of TypeScript.

In the context of our project, we will then install the following:

yarn add @types/core-js @types/express @types/lodash @types/node @types/socket.io

Configuring TypeScript

First, we rename all our JS files in the server to .ts. This will make them seen by the TypeScript transpiler. As we mentioned before, since TypeScript is a superset of JavaScript, just renaming your files to .ts should be enough.

Then, we also need to setup some configuration file for the TypeScript transpiler: tsconfig.json.

The few things worth mentioning in this configuration file are:

• Module: commonjs: as we are compiling for NodeJS (and not the browser), we will be transpiling into commonjs, which is the native NodeJS module system.
• Target: es5: level of JavaScript we are transpiling to: ES5 is old enough to be understood by any recent or not so recent NodeJS versions

We also need to modify our package.json file: we can’t use our source files directly now, we need to transpile them whenever we save a source code change, and we need to ensure that everything is transpiled when building the production version as well.

We then introduce a build-server step, which will be run with the build-client on build. In development, we still run yarn start and it will run the TypeScript transpiler before running the client and server.

Refactoring

For this article, we are going to keep the existing (and wrong) logic and convert it to TypeScript, before building the real logic in the next article, to minimise the amount of change.

The Models

To build our game logic, we will need to hold data, which means we are going to build some data structure. What do we need to represent exactly for a planning poker game?

• A game which holds players and stories
• A player that can cast a vote
• A story (as in, a Jira Story), that contains votes
• A card
• A vote that will link a card to a player in a given story

We are then doing just that in the server/models folder.

For now, as you can see here, the game creates one story and exposes it, so we don’t change too many things in the server logic.

Imports

NodeJS understands commonjs, but TypeScript will work well with ES6 modules. So we will convert all of our imports into ES6: see this file.

Next Week

Next week we are going to build upon this new TypeScript codebase and implement the real rules of Planning Poker, moving closer to a releasable product