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

✍ Scribed by Peter O'Hanlon

• Publisher: Packt Publishing
• Year: 2019
• Tongue: English
• Leaves: 408
• Edition: 1
• Category: Library

✦ Synopsis

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.

Table of Contents

1. Advanced TypeScript Features
2. Creating a Markdown Editor with TypeScript Type System
3. A React Bootstrap Personal Contacts Manager
4. The TypeScript MEAN stack - building a photo gallery
5. Angular ToDo app with GraphQL and Apollo
6. Building A Chatroom Application using Socket.IO
7. Building Cloud Based Mapping Application with Angular and Firebase
8. Building a CRM application using React and Microservices
9. Image recognition with Vue.js and Tensorflow.js
10. Building an ASP.NET Core Music Library

✦ Table of Contents

Cover
Title Page
Copyright and Credits
Dedication
About Packt
Contributors
Table of Contents
Preface
Chapter 1: Advanced TypeScript Features
Technical requirements
Building future-proof TypeScript with tsconfig
Introduction to advanced TypeScript features
Using different types with union types
Combining types with intersection types
Simplifying type declarations with type aliases
Assigning properties using object spread
Deconstructing objects with REST properties
Coping with a variable number of parameters using REST
AOP using decorators
Composing types using mixins
Using the same code with different types and using generics
Mapping values using maps
Creating asynchronous code with promises and async/await
Creating UIs with Bootstrap
Summary
Questions
Chapter 2: Creating a Markdown Editor with TypeScript
Technical requirements
Understanding the project overview
Getting started with a simple HTML project
Writing a simple markdown parser
Building our Bootstrap UI
Mapping our markdown tag types to HTML tag types
Representing our converted markdown using a markdown document
Updating markdown document using visitors
Understanding the visitor pattern
Applying the visitor pattern to our code
Deciding which tags to apply by using the chain-of-responsibility pattern
Bringing it all together
Summary
Questions
Further reading
Chapter 3: A React Bootstrap Personal Contacts Manager
Technical requirements
Understanding the project overview
Getting started with the components
Creating a React Bootstrap project with TypeScript support
Creating our mock layout
Creating our application
Formatting our code using tslint
Adding Bootstrap support
React using tsx components
How React uses a virtual DOM to be more responsive
Our React App component
Displaying the personal details interface
Simplify updating values with binding
Supplying state to bind against
Validating user inputs and the use of validators
Validating the address
Validating the name
Validating the phone number
Applying validation in a React component
Creating and sending data to the IndexedDB database
Adding active record support to our state
Working with the database
Accessing the database from PersonalDetails
Enhancements
Summary
Questions
Further reading
Chapter 4: The MEAN Stack - Building a Photo Gallery
Technical requirements
The MEAN stack
Project overview
Getting started
Creating an Angular photo gallery with the MEAN stack
Understanding Angular
Creating our application
App.Module.ts
Using Angular Material for our UI
Using Material to add navigation
Creating our first component – the FileUpload component
Previewing files using a service
Using the service in the dialog
The file upload component template
Introducing Express support into our application
Providing routing support
Introducing MongoDB
Back to our routing
Displaying images
Using RxJS to watch for images
Transferring the data
Back to the page body component
Wrapping up by displaying the dialog
Summary
Questions
Further reading
Chapter 5: Angular ToDo App with GraphQL and Apollo
Technical requirements
Understanding the GraphQL-to-REST relationship
Project overview
Getting started with the project
Creating a ToDo application with GraphQL and Angular
Creating our application
Creating our GraphQL schema
Setting up our GraphQL types
Creating our GraphQL resolver
Using Apollo Server as our server
The GraphQL Angular client
Adding client-side Apollo support
Adding routing support
The routing user interface
Adding content to our page components
Summary
Questions
Further reading
Chapter 6: Building a Chat Room Application Using Socket.IO
Technical requirements
Long-running client/server communications using Socket.IO
Project overview
Getting started with Socket.IO and Angular
Creating a chat room application using Socket.IO, Angular, and Auth0 
Creating our application
Adding Socket.IO support to our server
Creating our chat room client
Using decorators to add client-side logging
Setting up Bootstrap in Angular
Bootstrap navigation
Authorizing and authenticating users using Auth0
Using secure routing
Adding client-side chat capabilities
Working in rooms
Getting the messages
Finishing the server sockets
Namespaces in Socket.IO
Finishing off our application with the GeneralchatComponent
Summary
Questions
Further reading
Chapter 7: Angular Cloud-Based Mapping with Firebase
Technical requirements
Modern applications and the move to cloud services
Project overview
Getting started with Bing mapping in Angular
Signing up to Bing mapping
Signing up to Firebase
Creating a Bing Maps application using Angular and Firebase
Adding the map component
Points of interest
Representing the map pins
Trying interesting things with map searches
Adding Bing Maps to the screen
The map events and setting pins
Securing the database
Summary
Questions
Chapter 8: Building a CRM Using React and Microservices
Technical requirements
Understanding Docker and microservices
Docker terminology
Container
Image
Port
Volume
Registry
Docker Hub
Microservices
Designing our REST API using Swagger
Creating a microservices application with Docker
Getting started creating a microservices application with Docker
Adding server-side routing support
The Server class
Creating our Addresses service
Using Docker to run our services
Using docker-compose to compose and start the services
Creating our React user interface
Using Bootstrap as our container
Creating a tabbed user interface
Using a select control to select an address when adding a person
Adding our navigation
Summary
Questions
Further reading
Chapter 9: Image Recognition with Vue.js and TensorFlow.js
Technical requirements
What is machine learning and how does TensorFlow fit in?
What is machine learning?
What is TensorFlow and how does it relate to machine learning?
Project overview
Getting started with TensorFlow in Vue
Creating our Vue-based application
Showing a home page with the Vue template
Introducing MobileNet
The Classify method
Modifying the HelloWorld component to support image classification
The Vue application entry point
Adding pose detection capabilities
Drawing the key points on the canvas
Using pose detection on the image
A brief aside about pose detection
How does PoseNet work?
Back to our pose detection code
Completing our pose detection component
Summary
Questions
Further reading
Chapter 10: Building an ASP.NET Core Music Library
Technical requirements
Introducing ASP.NET Core MVC
Providing the project overview
Getting started creating a music library with ASP.NET Core, C#, and TypeScript
Creating our ASP.NET Core application with Visual Studio
Understanding the application structure
The Startup class
The files that make up the base views
Creating a Discogs model
Setting up the Results type
Writing our DiscogsClient class
Discogs rate limitations
Wiring up our controller
Adding the Index view
Adding TypeScript to our application
Calling our TypeScript functionality from ASP.NET
Summary
Questions
Further reading
Assessments
Other Books You May Enjoy
Index