Advanced TypeScript Programming Projects

Book description

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

Product information

  • Title: Advanced TypeScript Programming Projects
  • Author(s): Peter O'Hanlon
  • Release date: July 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781789133042