TypeScript Invaders

Sign in to queue


Today's project is simple project, yet provides a nice view into what you can do with TypeScript.


Starts from JavaScript, Ends with JavaScript

TypeScript starts from the syntax and semantics that millions of JavaScript developers know today.

With TypeScript, you can use existing JavaScript code, incorporate popular JavaScript libraries, and be called from other JavaScript code.

TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any other ES3-compatible environment

In short, it helps you build great JavaScript apps, using development and coding techniques your likely already familiar with.

Shawn Lawsure shows us this in this simple Space Invaders like TypeScript/JavaScript page...

Space Invaders Game Written in TypeScript


This is a browser-based game similar to the old Space Invaders video game written in TypeScript.


The code is written entirely in TypeScript. It provides examples of object orientation in TypeScript such as classes, constructors, and public/private/static object attributes and methods. It is also a good example of how to create a 2D game with a viewport, event handlers (listeners) and the use of JavaScript setInterval and setTimeout functions.

Using the Code

The code consists entirely of four separate classes encased in a TypeScript module. The four classes are named Game, Ship, Rocket and Alien. The Game class is the primary class used to control the game itself and is the one instantiated outside of the Games module as follows where 'viewPort' is the id of a <div> element where the game is displayed.


The rest of the code is relatively straight forward. Each of the Ship, Rocket and Alien classes encapsulates its own image and position within the viewport and provide a Move, SetXPos and SetYPos functions that control the movement of each object.

Here's a snap from Visual Studio;



The Discussion

Add Your 2 Cents