Advanced TypeScript Programming Projects

Length: 416 pages
Edition: 1
Language: English
Publisher: Packt Publishing
Publication Date: 2019-07-26
ISBN-10: 1789133041
ISBN-13: 9781789133042
Sales Rank: #920703 (See Top 100 Books)

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.

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

Title Page
Copyright and Credits
    Advanced TypeScript Programming Projects
Dedication
About Packt
    Why subscribe?
Contributors
    About the author
    About the reviewer
    Packt is searching for authors like you
Preface
    Who this book is for
    What this book covers
    To get the most out of this book
        Download the example code files
        Download the color images
        Conventions used
    Get in touch
        Reviews
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
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
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
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
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
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
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
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
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
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
    Chapter 1
    Chapter 3
    Chapter 4
    Chapter 5
    Chapter 6
    Chapter 7
    Chapter 8
    Chapter 9
    Chapter 10
Other Books You May Enjoy
    Leave a review - let other readers know what you think

Computers & Technology

To access the Link, solve the captcha.

How to download source code?

1. Go to: https://github.com/PacktPublishing

2. In the Find a repository… box, search the book title: Advanced TypeScript Programming Projects, sometime you may not get the results, please search the main title.