Introduction to TypeScript: Building a Rogue-like Engine - HTML5 Game Development Insights - page 304

Next, go back into your renderer.ts file, and add the following class under your interface:
export class CanvasMapRenderer implements IMapRenderer{
}
When you click the Save button, you should see errors similar to those shown in Figure 19-12 .
Figure 19-12. As you can see, an error informs you that your class is not implementing your interface
The compiler is telling you that, even though you implemented the interface in your class, you still didn't add
the actual methods defined in it. An interface is like a contract that guarantees the rest of the code that anything
implementing it will always have the public methods it defines. Let's make the compiler happy before moving on and
adding the actual render logic. Create these three methods on your CanvasMapRenderer :
public draw(tiles: any[]):void{
}
public drawTile(column: number, row: number, currentTile: string): void {
}
public clearMap(): void {
}
Now, if you go back to your game.ts file, you can assign this new class to the renderer property that you added
before. Add the following code to your game's constructor, just above your game loop:
this.renderer = new renderer.CanvasMapRenderer();
Click the Save button, and look at the console. You should now see that the compiler is satisfied, and you can
begin adding logic to your renderer. Go back into the renderer.ts file, and add the following constructor to your
CanvasMapRenderer :
constructor (private canvas: HTMLCanvasElement, private tileRect: geom.Rectangle) {
this.target = this.canvas.getContext("2d");
}