Generics

Imagine that you are developing a game and storing and retrieving game information to/from a database. This means you have to implement the classic Create, Read, Update and Delete operations (CRUD) for the various objects in the game. Here’s some high level code that beings to implement the game and this logic:

The code defines three classes:

• : This is the game object itself, keeping track of overall game state, including a list of players and the currently active player.
• Player: Represents a player in the game. Players also have some state information, although its different than a Game.
• GameStateDBHelper: A utility class that provides input/output operations and supports all four CRUD operations for the Game object.

GameStateDBHelper defines four public methods, one for each of the CRUD operations. These each take commonsense input parameters and return commonsense results. Consider LoadGame:

    public LoadGame(query: string): Game {
        // Use supplied query to load some game state from the database.
        // Convert that to a GameState object
        // return it
        return new Game(null);
    }

LoadGame is passed a query (think “select * from Games…”). It parses the result and returns back a new Game object. Obviously, there’s a lot of hand waving going on in the example, but hopefully the concept is clear.

Despite the clarity and strong-typed goodness, this approach is nonetheless problematic. We already know we’ll want another database-backed entity - Player. If we simply follow the current approach, we end up creating a new helper function, PlayerStateDBHelper. It has to provide the same CRUD functions and each one shaped almost identically to GameState. “Shape” in this case means:

• Looking up database connection information.
• Accessing the database
• Executing some common command that varies only in small details from one object to another
• Managing errors
• Returning success/fail messages

We can mitigate most of that using TypeScript’s generic functionality. Here’s how it would look like:

interface DBBackedEntity {
    TableName: string;
}
class GameState implements DBBackedEntity {
    public get TableName(): string { return this.myDBTableName; }
    public CurrentPlayerIndex: number;
    constructor(someGameState: any) { 
        this.myDBTableName = "Games";
    }
}
class GamePlayer implements DBBackedEntity {
    private myDBTableName: string;
    public get TableName(): string { return this.myDBTableName; }
    public PlayerName: string;
    public Score: number;
    constructor(somePlayerState: any) { 
        this.myDBTableName = "Players";
    }
class DBHelper<T extends DBBackedEntity> {
    public CreateRecord() : T { return null; }
    public ReadRecord(query: any): T { return null; }
    public DeleteRecord(basedOn: T): boolean { return true; }
    public UpdateRecord(basedOn: T) : boolean { return true; }
const gameStateHelper = new DBHelper<GameState>();
const gamePlayerHelper = new DBHelper<GamePlayer>();
const newPlayer = gamePlayerHelper.CreateRecord();
console.log(`New player score: ${newPlayer.Score}.`)
const existingGameState = gameStateHelper.ReadRecord("some query goes here");
const newGameState = gameStateHelper.CreateRecord();
const deleteResult = gameStateHelper.DeleteRecord(newGameState);
const updateResult = gameStateHelper.UpdateRecord(existingGameState);

Generics introduce some new syntax and leverage existing concepts (like interfaces) in new ways.

The code first defines a new interface, DBBackedEntity. This interface requires a single text field, “TableName”. This obviously maps to a database table via its name.

The DBHelper class introduces the generics syntax:

This syntax, <T extends DBBackedEntity> effectively says, “The DB helper class works against any type (class) that implements the DBBackedEntity interface.” When client code instantiates an instance of DBHelper, it will specify a value for that parameter, T. These two lines show how to pass a value for T:

const gameStateHelper = new DBHelper<GameState>();
const gamePlayerHelper = new DBHelper<GamePlayer>();

When working with generics, we supply type parameters via angle brackets: DBHelper<GameState> and DBHelper<GamePlayer>. TypeScript replaces the T parameter in the DBHelper class with GameState and respectively.

Further Reading

Summary

This chapter on generics brings the main body of of Yet Another TypeScript Book to a close. The next chapter suggests some additional reading and videos that you may find of interest