Advanced TypeScript Programming Projects

Build 9 different apps with TypeScript 3 and JavaScript frameworks such as Angular, React, and Vue

Peter O'Hanlon

• Publisher: Packt Publishing
• Year: 2019
• ISBN:
  9781788991018
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Gain in-depth knowledge of TypeScript and the latest ECMAScript standards by building robust web applications across different domains

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

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

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.

Image Recognition with Vue.js and TensorFlow.js

One of the hottest topics in computing at the moment is machine learning. In this chapter, we are going to step into the world of machine learning and look at using the popular TensorFlow.js package to perform image classification, as well as to detect poses. As a break from Angular and React, we will move on to Vue.js to provide our client implementation.

The following topics will be covered in this chapter:

• What machine learning is and how it relates to AI
• How to install Vue
• Creating an application with Vue
• Showing a home page with the Vue template
• Using routing in Vue
• What Convolutional Neural Networks (CNNs) are
• How models are trained in TensorFlow
• Building an image classification class using pre-trained TensorFlow models
• The image types that TensorFlow supports for image classification and pose detection
• Using pose detection to show body joints

Technical requirements

The finished project can be downloaded from https://github.com/PacktPublishing/Advanced-TypeScript-3-Programming-Projects/tree/master/chapter09. This project uses TensorFlow, so the following additional components will be used in this chapter:

• @tensorflow-models/mobilenet
• @tensorflow-models/posenet
• @tensorflow/tfjs

We will also use Bootstrap with Vue, so we will need to install the following Bootstrap components:

• bootstrap
• bootstrap-vue

After downloading the project, you will have to install the package requirements using the npm install command.

What is machine learning and how does TensorFlow fit in?

It's very hard nowadays to get away from the idea of artificially intelligent machines. People have become accustomed to having access to tools such as Siri, Alexa, and Cortana, which create the appearance that the technology understands us and is able to interact with us. These voice-activated systems use natural language processing to recognize sentences such as, What's the weather like in Kos today?

The magic behind these systems is machine learning. To pick one of these systems, we will quickly look at what Alexa does behind the scenes before we look at how machine learning relates to AI.

When we ask Alexa a question, she recognizes her name so that she knows that she should start listening to what comes after to start processing. This is the software equivalent of tapping someone on their shoulder to get their attention. Alexa then records the following sentence until a point is reached where Alexa can transmit the recording via the internet to the Alexa voice service. This incredibly sophisticated service parses the recording as best it can (sometimes, heavy accents can confuse the service). The service then acts on the parsed recording and sends the results back to your Alexa device.

As well as answering questions about the weather, there is an exhausting number of Alexa skills that users can use, and Amazon encourages developers to create skills that go beyond what they have time to come up with. This means that it's as easy to order a pizza as it is to check the latest racing results.

This preamble leads us to the point where we start to touch on what machine learning has to do with Alexa. The software behind Alexa uses machine learning to continually update itself, so every time it makes a mistake, this is fed back in so that the system is smarter the next time around and doesn't make that mistake in the future.

As you can imagine, interpreting speech is a hugely complicated task. It's something that we, as humans, learn from an early age, and the analogy with machine learning is quite breathtaking because we also learn speech through repetition and reinforcement. So, when a baby randomly says dada, the baby has learned to make the sounds, but does not know the correct context for the sound yet. Reinforcement, usually provided by the parents pointing to themselves, is used to link the sound to a person. Similar reinforcement takes place when we use picture books; when we teach a baby the word cow, we point to a picture of a cow. That way, the baby learns to associate the word with the picture.

Since speech interpretation is so complicated, it takes a huge amount of processing power, and it also requires a huge pre-trained dataset. Imagine how frustrating it would be if we had to teach Alexa everything. This is partly why machine learning systems are only really coming into the...