What we are building
This post follows on from the previous post
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.
For anyone unfamiliar,
typescript is a wrapper library around
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
nullas an argument to a function that blows up if it receives
- Easier to develop: Types allow IDEs to enable features such as
intellisensewhich predicts what you are going to type and can highlight errors.
Install typescript dependency
So far our project is setup to only handle
html files. We'll now configure our application to
IDE and navigate to the
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
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
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
es6 and the
es2020, the reasons are explained below.
es stands for
ecmascript which is the original name of
es6 as a target so we can use more modern
js features when writing our application.
module: This determines how we can import
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
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
node is the default standard.
esModuleInterop: This flag, when enabled helps resolve a compatibility issue with importing
commonJs libraries with
exclude: List of folders the compiler should ignore.
include: List of folders the compiler should include.
Before setting up the
typescript conversion we will need a typescript file to test.
src/index.js file to
build script in
package.json as below.
"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
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
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
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.
Now we have a way to
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!