Advanced TypeScript Programming Projects

▶Book Description
With the demand for ever more complex websites, the need to write robust, standard-compliant JavaScript has never been greater. TypeScript is modern JavaScript with the support of a first-class type system, which makes it simpler to write complex web systems. With this book, you’ll explore core concepts and learn by building a series of websites and TypeScript apps.

You’ll start with an introduction to TypeScript features that are often overlooked in other books, before moving on to creating a simple markdown parser. You’ll then explore React and get up to speed with creating a client-side contacts manager. Next, the book will help you discover the Angular framework and use the MEAN stack to create a photo gallery. Later sections will assist you in creating a GraphQL Angular Todo app and then writing a Socket.IO chatroom. The book will also lead you through developing your final Angular project which is a mapping app. As you progress, you’ll gain insights into React with Docker and microservices. You’ll even focus on how to build an image classification program with machine learning using TensorFlow. Finally, you’ll learn to combine TypeScript and C# to create an ASP.NET Core-based music library app.

By the end of this book, you’ll be able to confidently use TypeScript 3.0 and different JavaScript frameworks to build high-quality apps.

▶What You Will Learn
- Discover how to use TypeScript to write code using common patterns
- Get to grips with using popular frameworks and libraries with TypeScript
- Leverage the power of both server and client using TypeScript
- Learn how to apply exciting new paradigms such as GraphQL and TensorFlow
- Use popular cloud-based authenticated services
- Combine TypeScript with C# to create ASP.NET Core applications

▶Key Features
- Apply the cutting-edge features of TypeScript 3.0 to build high-performance, maintainable applications
- Learn through practical examples of using TypeScript with popular frameworks, such as Angular and React
- Focus on building high-quality applications that are modular, scalable and adaptable

▶Who This Book Is For
This book is for programmers and web developers who are familiar with TypeScript and want to put their knowledge to work by building real-world complex applications. Prior experience with any other web framework is not required.

▶What this book covers
- Chapter 1, Advanced TypeScript Features, introduces us to features of TypeScript that we may not have encountered before, such as using Union and Intersection types, creating our own type declarations, and using Decorators to enable aspect-oriented programming, among other features. With this chapter, we are going to get familiar with a variety of TypeScript techniques that we will use on a daily basis as professional coders.

- Chapter 2, Creating a Markdown Editor with TypeScript, is where we write our first practical project – a simple Markdown editor. We are going to create a simple parser that we are going to hook up, inside a web page, to a text block and use it to identify when the user has typed in a Markdown tag and reflect this in a preview area. While writing this code, we are going to see how we can use design patterns with TypeScript to build more robust solutions.

- Chapter 3, A React Bootstrap Personal Contacts Manager, sees us building a personal contacts manager with the popular React library. While we are writing our application, we will see how React uses a special TSX file to mix TypeScript and HTML together to produce user components. We will also look at how to use binding and state in React to automatically update data models when the user changes values. The ultimate aim here is to create a UI that allows us to enter, save, and retrieve information using the browser's own IndexedDB database, and to see how we can apply validation to components to make sure that input is valid.

- Chapter 4, The MEAN Stack – Building a Photo Gallery, is the first time we encounter the MEAN stack. The MEAN stack describes a specific number of cooperative technologies to build applications that run on both the client and the server. We use this stack to write a photo gallery application using Angular as our UI, with MongoDB being used to store images that the user uploads. As we create the application, we will use the power of Angular to create services and components. At the same time, we are going to see how we can use Angular Material to create attractive UIs.

- Chapter 5, Angular ToDo App with GraphQL and Apollo, introduces us to the idea that we don't just need to use REST to communicate between a client and a server. One of the hot topics right now is the use of GraphQL to create applications that can consume and update data from multiple points using GraphQL servers and clients. The Angular application we write in this chapter will manage a list of to-do items for the user and will further demonstrate Angular features such as using templates to switch between read-only and editable features, as well as seeing what Angular provides out of the box to validate user input.

- Chapter 6, Building a Chat Room Application Using Socket.IO, further explores the ideas that we don't need to rely on REST communications. We are going to look at how we can establish long-running client/server applications in Angular, where the connection between the client and the server appears to be kept permanently open so that messages can be passed backward and forward. Using the power of Socket.IO, we are going to write a chatroom application. To further enhance our code, we are going to use an external authentication provider to help us professionally secure our application so that we avoid embarrassing authentication failures such as storing passwords in plaintext.

- Chapter 7, Angular Cloud-Based Mapping with Firebase, it has become impossible to ignore the growth of cloud-based services. In this, our last Angular application, we are going to use two separate cloud-based services. The first one we are going to use, Bing mapping, will show us how to sign up to a third-party, cloud-based mapping service and integrate it into our application. We will discuss the effect of scale on costs for this service. We will display a map where the user can save points of interest, with the data being stored in a separate cloud-based database using Google's Firebase cloud platform.

- Chapter 8, Building a CRM Using React and Microservices, builds on our experiences with both React and the MEAN stack to introduce us to working with the equivalent Reactbased stack. When we first encountered MEAN, we used REST to talk to a single application endpoint. In this application, we are going to talk to multiple microservices to create a simplified React-based CRM system. We will discuss what microservices are and when we would want to use them, as well as seeing how we can design and document REST APIs using Swagger. The main takeaway from this chapter is that we introduce Docker to show how we can run up our services inside their own containers; containers are currently one of the favorite topics among developers when developing applications because of the way they simplify the rolling out of applications, and they aren't that hard to use.

- Chapter 9, Image Recognition with Vue.js and TensorFlow.js, introduces us to using our web browser to host machine learning using TensorFlow.js. We will write an application using the popular Vue.js framework to identify images using pre-trained image models. We will extend this to see how to create pose detection applications that recognize which pose you are in and can be extended to tracking your poses using a web camera for purposes of sports coaching.

- Chapter 10, Building an ASP.NET Core Music Library, is a big departure for us. We have written a number of applications now where TypeScript has represented the main coding language that we use to build our UIs. With ASP.NET Core, we are going to write a music library application where we can enter the name of an artist and search for details of their music using the free Discogs music API. We will be using a combination of C# and TypeScript to both run queries against Discog and to build up our UI.