In this level you will be learning how to use TypeScript and more advanced Coding Standards, this will include:

• Learning TypeScript.
• Understanding Clean Code Concepts.
• Learning about Error Handling and Logging.
• Applying the knowledge and skills you have learned to created a TypeScript Project.

1. DN Basic Web Framework TS

The DN Basic Web Framework TS was create by Digital Native to allow first time TypeScript developers to practice developing basic webpages using HTML, CSS, JavaScript and TypeScript.

Click the image below and download/clone the DN Basic Web Framework TS.

Click the image below and read through the documentation for the project. This will provide detail into how the framework is used.

2. Introduction to TypeScript

TypeScript is a compiled language which is a superset of JavaScript, adding static typing to the language. Allowing for better tooling, error checking and code organisation.

Watch the video below on the basics of TypeScript.

Click the image below and complete the following TypeScript Tutorial.

Click the image below and read the article ‘TypeScript for JavaScript Programmers’.

3. Clean Code Concepts

Clean code concepts are practices that aim to improve the quality, readability and maintainability of code. These concepts include:

• Naming – When naming variables, functions, classes, use descriptive and consistent names. Avoid names that could cause confusion.
• Comments – Comments can be used to explain the purpose and logic within the code. It is important to explain the ‘Why?’, this will help future you and other developers interpreting your code.
• Formatting – Adding consistent indentations, spacing and line breaks can make your code easier to read. Some IDEs have built-in automatic indentation.
• Refactoring – Frequent code reviews can be useful to simplify and remove any redundant / unnecessary code.
• Modularity – Breaking your code into small units can make your code easier to read, adding to reusability and testability. This can be achieved through, modules, components, and more.
• Single Responsibility Principles – Functions / Classes should only have one job. Linked to modularity this adds to reusability and removes duplicate code.

Click the image below and read this README file on Clean Code Concepts in TypeScript. Style Guides can be different depending on the language you are using and the team you are working in.

4. Error Handling / Logging

Error Handling

Error handling is an important part of an application. Using error handling allows the application to ‘catch’ an error and handle them depending on the error occurring.

Throw

Click on the image below and read the article on “throw”.

Try Catch Finally

Click on the image below and read the article on “try…catch”.

Promise Prototype Catch Method

Click on the image below and read the article on the Promise prototype catch method.

Logging

Logging is used to track and record a process/error that occurs inside an application / program.

A process log is used to record certain details within a process for future reflection. For example, user activity, automation process status and more.

Logging errors that occur can help with debugging. These logs can be done through server side files and/or database tables. It is important to include detail in your error logs.

Level 2 Development

For your Level 2 Solution you will need to:

• Translate your level 1 Solution into TypeScript, and run in the DN Basic Web Framework TS.
• Add appropriate error handling.
• Log errors in IndexedDB.
• Apply Clean Code Concepts.

To make things easier, try to do one thing at a time. Split the problems you encounter into smaller steps for ease of understanding.

Suggested Approach: Translating Level 1 Project to TypeScript:

• Complete the TypeScript learning resources.
• Get familiar with the DN Basic Web Framework TS.
• Experiment by adding/editing TypeScript.
• Work through your code, translating one function at a time.

Suggested Approach: Adding Error Handling/Logging:

• Complete the Error Handling / Logging learning resources.
• Get familiar with throwing errors and try…catch statements.
• Throw errors where necessary (for example: null references, unmet conditions).
• Add try…catch statements where needed.
• Log errors into IndexedDB.

Suggested Approach: Applying Clean Code Concepts:

• Complete the Clean Code Concepts learning resources.
• Review your code and take notes of where changes need to be made.
• Apply the changes.

Level 2 Complete!

Once you have completed your level 2 solution, you are then ready to start level 3.

Click the image below to start Level 3.