The code for this chapter can be downloaded from https://github.com/PacktPublishing/Advanced-TypeScript-3-Programming-Projects/tree/master/Chapter02.

Now that we have a grasp of some of the concepts that we are going to cover throughout the rest of this book, we are going to start putting them into practice by creating a project that parses a very simple markdown format while the user types into a text area and displays the resulting web page alongside it. Unlike full markdown parsers, we are going to concentrate on formatting the first three header types, the horizontal rule, and paragraphs. The markup is restricted to breaking lines down by newline characters and looking at the start of a line. It then determines whether or not a particular tag is present and, if not, it assumes the current line is a paragraph. The reason we have chosen this implementation is because it is a simple task to pick up immediately. While it is simple, it offers sufficient depth to show that we are going to tackle...

This project is a simple HTML and TypeScript file combination. Create a directory to hold the HTML and TypeScript files. Our JavaScript will reside in a script folder under this directory. The following tsconfig.json file is used:

{
  "compilerOptions": {
    "target": "ES2015", 
    "module": "commonjs", 
    "sourceMap": true, 
    "outDir": "./script", 
    "strict": true, 
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true, 
    "experimentalDecorators": true,
  }
}

When I was thinking about the project that we are going to tackle in this chapter, I had a clear objective in mind. While we are writing this code, we are going to try out things such as patterns and good object-oriented (OO) practices, such as classes having a single responsibility. If we can apply these techniques right from the start, we will soon get into the habit of using them and this will translate into useful development skills.

As professional developers, before we write any code, we should gather the requirements that we are going to use and ensure that we are making no assumptions about what our application will do. We may think that we know what we want our application to do, but if we make a list of our requirements, we'll make sure that we understand everything that we are meant to deliver and we'll come up with a handy...

In this chapter, we have built an application that responded to what the user was typing into a text area, and updated a label with converted text. The conversion of this text was handled by classes, each of which had a single responsibility. The reason we concentrated on producing classes that only did one thing was to learn, right from the start, how to use industry best practices to make our code cleaner and less prone to errors, since a well-designed class that only does one thing is less likely to have problems than classes that do lots of different things.

We introduced the visitor and chain-of-responsibility patterns in order to see how we could separate the text processing into deciding whether a line contained markdown and adding the appropriate HTML-encoded text. We started introducing patterns because patterns occur in so many different software development...

1. The application currently only reacts to the user changing the content using the keyboard. It is possible that the user could use the context menu to paste the text in. Enhance the HtmlHandler method to cope with the user pasting text in.
2. We added H1 to H3 support. HTML also supports H4, H5, and H6. Add support for these tags.
3. In the CanHandle code, we are calling the Visitable code. Change the base Handler class so that it calls the Accept method.

For further information about using design patterns, I would recommend the book TypeScript Design Patterns (https://www.packtpub.com/application-development/typescript-design-patterns) by Vilic Vane, published by Packt.