Create a simple Javascript Typescript canvas game environment

What we are building

This post follows on from the previous post basic-javascript-env linked below. You can either complete that post or clone / download the project linked in the code above from GitHub.

By the end of this post we will have setup a simple typescript project structure to use for html 5 canvas game design which includes.

• typescript project structure
• Updated npm scripts

If these are new concepts to you, don't worry I will go over each part in detail. The instructions will be for mac but similar commands and process can be followed to setup a project on other operating systems.

Here's a final link to the code if you get stuck.

Why use typescript vs javascript

For anyone unfamiliar, typescript is a wrapper library around javascript that provides a type interface. Some largely agreed upon benefits of using a typed language are listed below.

• Easier to maintain and reason about the code. Types provide a clearer interface to our functions.
• Easier to test, reduces test complexity. Covers cases related to type checking that would otherwise require tests to validate.
• Less error prone. Typescript stops us passing in null as an argument to a function that blows up if it receives null.
• Easier to develop: Types allow IDEs to enable features such as intellisense which predicts what you are going to type and can highlight errors.

Install typescript dependency

So far our project is setup to only handle javascript and html files. We'll now configure our application to compile typescript .ts files.

Download the basic-javascript-env files from sd games, you can use the green code button to either clone or download a zip file.

Open the basic-javascript-env directory in your favourite IDE and navigate to the basic-javascript-env directory in your terminal.

We start by installing the typescript dependency in our project via npm by running the below terminal command.

npm install typescript --save-dev

This will add a typescript dependency to our package.json dependencies section and allow us to use the tsc command to initialise and build our project.

Typescript setup with tsconfig

Run the below command in the terminal to create a tsconfig.json typescript config file that will store our desired typescript settings. npx is a package runner that is part of npm. We can use npx as shown below to take advantage of installed dependencies, in this case tsc to initialise a typescript config.

npx tsc --init

A tsconfig.json file is generated which has many lines that are not required (mostly commented out). Below is a stripped back version that will suit our purposes.

Note make sure to change the target to es6 and the module to es2020, the reasons are explained below.

{
  "compilerOptions": {
    "target": "es6",
    "module": "es2020",
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
  },
  "exclude":[
    "./node_modules"
  ],
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ]
}

target: Version of javascript we want to compile to. es stands for ecmascript which is the original name of javascript. We want to leverage the latest es6 as a target so we can use more modern js features when writing our application.

module: This determines how we can import modules. es2020 will allow us to use standard import someModule from '<module-path>' syntax which is what we want.

outDir: Output directory where compiled typescript code will be.

rootDir: Entry directory where the compiler should start searching for typescript files.

strict: Turns on extra options relating to stricter type checking rules.

moduleResolution: This relates to how the compiler works out how to handle and resolve import statement, node is the default standard.

esModuleInterop: This flag, when enabled helps resolve a compatibility issue with importing commonJs libraries with es6.

exclude: List of folders the compiler should ignore.

include: List of folders the compiler should include.

Compiling typescript to javascript

Before setting up the typescript conversion we will need a typescript file to test. Rename our src/index.js file to src/index.ts.

Update our build script in package.json as below.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node build/index.js",
    "build": "rm -rf build && tsc && cp src/index.html build",
    "serve": "http-server build"
  },

Now we can invoke our build script with the below command which will convert all our typescript files and store the output in the directory we specified in outDir as well as copy over our index.html file.

npm run build

This command will start by removing the existing build directory and its contents and then convert all the typescript files that match our given tsconfig setup into javascript files and output them to the build folder.

From here we can run our index.js script via the npm run start command.

We can also serve our static files from the build folder by running npm run serve. Open the endpoint that is provided by http-server to see our compiled typescript application.

You should see our red canvas border and when you view the console in the browser you should see the Hello game development! message.

Note how we didn't have to update the index.html's script tag to be index.ts because once compiled all .ts files have been converted to .js files. This is required because the browser does not understand what a .ts file is.

Finish

Now we have a way to build and compile the static (including typescript) files required for our app to the build directory and serve them locally!

There are more fancy features we can add to our project to help with development such as cold reloading. This will automatically update and compile our code so we don't have to manually run the build script each time we make a change to src. I plan to write another post covering this but for now we have all we need to start playing with the html 5 canvas!