First things first, we need to create a new project that will host our application and configure the compiler settings. Create a new project in Visual Studio, using the TypeScript project template as described in Chapter 2, TypeScript Basics, and call it DrawingApplication. Then, open up the project properties by right-clicking on the project and selecting Properties.

In the following screenshot, you can see the settings we will use for this application:

As you can see, we will be targeting ECMAScript 3 to ensure a broader scope of platforms that our application will run on. We will not be using an external module system, comments will be removed from the final output, and the rest of the output can be left as the default values. Next, we need to modify index.html to contain a canvas element. The HTML canvas element is part of the HTML5 standard, which is supported by most modern browsers at this point. Since we aren't using jQuery yet, we will also need to move the loading of our app.js file to within the body; that way, the canvas element will be available to us at runtime. The following screenshot shows the index.html file after making these modifications:

Now that we have the basics for the project set up, let's start putting together an object-oriented TypeScript application. As we move through this chapter, we will use a couple of enumerations to help us define abstractions and allow our types to communicate in a strongly typed fashion. I prefer to maintain a clear separation of code for easy navigation, so all of the enums that are created will be placed in a file called Enums.ts. The two enums are as follows:

enum DrawingToolType {
    Select,
    Rectangle,
    Circle,
    Line,
    Freehand
}
enum CanvasEngineAction {
    None,
    Move,
    Resize
}

The DrawingToolType type will be used to help determine which drawing tool the user has selected. The type responsible for interacting with the canvas will need to know this to function properly. The CanvasEngineAction type will be used by the objects responsible for drawing the shapes to inform the canvas operator what to do with the user's input.