HTML and CSS Reference
In-Depth Information
This is the basic structure for setting up your modules and classes. As you can see, you define the module at the
top as rogue and then include your class. You can have several classes in a single module file or break them up over
different files. I personally tend to keep classes that are part of the same module in one file. I also take advantage of the
keyword “export,” which tells the compiler to make the class publically accessible. Although you can have private and
public classes in TypeScript, it doesn't necessarily translate 100 percent to JavaScript, as everything is public. Using
the keyword “export” is a good way to let the compiler validate those classes that allow access to themselves outside
their package, and it's helpful when you are building more complex projects with TypeScript. As you continue to stub
out the rest of the game, you will get a better sense of what this means.
Another thing to point out about this class is that you are using a shorthand notation to set up your display
property automatically in the constructor. Normally, you would define the public display on the class itself, above the
constructor, but in TypeScript, you can save some time by simply defining an argument in your constructor as private
or public, which will automatically set it as a property of your class. This is incredibly helpful. Also, note that you
are typing the display property to
HTMLCanvasElement
. TypeScript is well aware of the native HTML element types,
and each has its own unique type. This will allow you to have the compiler validate that you are using the correct
application programming interfaces (APIs) on the element. You can also define your own constants, but I will not get
into that for this project. Simply note that doing so is helpful for avoiding typos when accessing anything; this is one of
the great advantages of using a typed language.
If you click the Save button and go back to the command prompt, you should see it compile and give you the okay
that the file is done, as shown in Figure
19-7
.
Figure 19-7.
As you can see at the bottom of the command prompt, the typescript task has run, and it compiled
without any errors
Check the deploy/js folder, and open the
game.js
file. You should see something like the one displayed in
Figure
19-8
.
