Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Advanced TypeScript Programming Projects
Advanced TypeScript Programming Projects

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

eBook
Can$30.99 Can$44.99
Paperback
Can$55.99
Subscription
Free Trial

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

Advanced TypeScript Programming Projects

Creating a Markdown Editor with TypeScript

It is hard to deal with content on the internet without encountering markdown. Markdown is a simplified way to create content using plain text that is easily converted into simple HTML. In this chapter, we are going to investigate what it takes to create a parser that will convert a subset of the markup format into HTML content. We will automatically convert relevant tags into the first three header levels, the horizontal rule, and paragraphs.

By the end of this chapter, we will have covered how to create a simple Bootstrap web page and reference the JavaScript generated from our TypeScript, as well as hooking up to a simple event handler. We will also cover how to create classes using simple design patterns and how to design classes with single responsibilities, which are techniques that serve us well as professional developers.

The...

Technical requirements

Understanding the project overview

Now that we have a grasp of some of the concepts that we are going to cover throughout the rest of this book, we are going to start putting them into practice by creating a project that parses a very simple markdown format while the user types into a text area and displays the resulting web page alongside it. Unlike full markdown parsers, we are going to concentrate on formatting the first three header types, the horizontal rule, and paragraphs. The markup is restricted to breaking lines down by newline characters and looking at the start of a line. It then determines whether or not a particular tag is present and, if not, it assumes the current line is a paragraph. The reason we have chosen this implementation is because it is a simple task to pick up immediately. While it is simple, it offers sufficient depth to show that we are going to tackle...

Getting started with a simple HTML project

This project is a simple HTML and TypeScript file combination. Create a directory to hold the HTML and TypeScript files. Our JavaScript will reside in a script folder under this directory. The following tsconfig.json file is used:

{
"compilerOptions": {
"target": "ES2015",
"module": "commonjs",
"sourceMap": true,
"outDir": "./script",
"strict": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"noImplicitThis": true,
"alwaysStrict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"esModuleInterop": true,
"experimentalDecorators": true,
}
}

Writing a simple markdown parser

When I was thinking about the project that we are going to tackle in this chapter, I had a clear objective in mind. While we are writing this code, we are going to try out things such as patterns and good object-oriented (OO) practices, such as classes having a single responsibility. If we can apply these techniques right from the start, we will soon get into the habit of using them and this will translate into useful development skills.

As professional developers, before we write any code, we should gather the requirements that we are going to use and ensure that we are making no assumptions about what our application will do. We may think that we know what we want our application to do, but if we make a list of our requirements, we'll make sure that we understand everything that we are meant to deliver and we'll come up with a handy...

Summary

In this chapter, we have built an application that responded to what the user was typing into a text area, and updated a label with converted text. The conversion of this text was handled by classes, each of which had a single responsibility. The reason we concentrated on producing classes that only did one thing was to learn, right from the start, how to use industry best practices to make our code cleaner and less prone to errors, since a well-designed class that only does one thing is less likely to have problems than classes that do lots of different things.

We introduced the visitor and chain-of-responsibility patterns in order to see how we could separate the text processing into deciding whether a line contained markdown and adding the appropriate HTML-encoded text. We started introducing patterns because patterns occur in so many different software development...

Questions

  1. The application currently only reacts to the user changing the content using the keyboard. It is possible that the user could use the context menu to paste the text in. Enhance the HtmlHandler method to cope with the user pasting text in.
  2. We added H1 to H3 support. HTML also supports H4, H5, and H6. Add support for these tags.
  3. In the CanHandle code, we are calling the Visitable code. Change the base Handler class so that it calls the Accept method.

Further reading

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • 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

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.

Who is this book 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 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

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jul 26, 2019
Length: 416 pages
Edition : 1st
Language : English
ISBN-13 : 9781789133042
Languages :
Tools :

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : Jul 26, 2019
Length: 416 pages
Edition : 1st
Language : English
ISBN-13 : 9781789133042
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just Can$6 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just Can$6 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total Can$ 186.97
Mastering TypeScript 3
Can$69.99
Learn TypeScript 3 by Building Web Applications
Can$60.99
Advanced TypeScript Programming Projects
Can$55.99
Total Can$ 186.97 Stars icon

Table of Contents

12 Chapters
Advanced TypeScript Features Chevron down icon Chevron up icon
Creating a Markdown Editor with TypeScript Chevron down icon Chevron up icon
A React Bootstrap Personal Contacts Manager Chevron down icon Chevron up icon
The MEAN Stack - Building a Photo Gallery Chevron down icon Chevron up icon
Angular ToDo App with GraphQL and Apollo Chevron down icon Chevron up icon
Building a Chat Room Application Using Socket.IO Chevron down icon Chevron up icon
Angular Cloud-Based Mapping with Firebase Chevron down icon Chevron up icon
Building a CRM Using React and Microservices Chevron down icon Chevron up icon
Image Recognition with Vue.js and TensorFlow.js Chevron down icon Chevron up icon
Building an ASP.NET Core Music Library Chevron down icon Chevron up icon
Assessments Chevron down icon Chevron up icon
Other Books You May Enjoy Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Full star icon Full star icon Full star icon Full star icon 5
(2 Ratings)
5 star 100%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
NNNVVV Dec 13, 2019
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I've been developing software for over 20 years using a mixture of languages and technologies and recently have started to migrate more into the web development sphere away from mainly desktop/server.Having a solid background in software engineering and modern programming languages it was great to find a book targeted at my level. Anyone who has written C++, C#, (other OO languages) will find Typescript pretty straightforward but it's great to get a more in-depth look at what is supported.Whilst beginners would learn some valuable lessons from this book it's aimed at more experienced developers. I found the detailed process of developing each project from first principles refreshing and a good reminder that for successful outcomes you need solid requirements.Where some recent books I've read around the subject seem to focus on cramming as many features and buzzwords into as little space as possible, this book picks the tools you'll need to develop a whole range of applications and provides in-depth working examples of how to use them.Typescript will continue to evolve and push into new arenas of development and with this book I hope I'll have the solid foundations to keep up to date.
Amazon Verified review Amazon
Christian Graus Nov 23, 2019
Full star icon Full star icon Full star icon Full star icon Full star icon 5
The author clearly knows his stuff, the materials are set out logically and in a way that builds knowledge over time. The practical examples in a number of popular frameworks mean there's real world examples, no matter what you use, and I definitely walked away knowing a lot more about Typescript than I did at the start, despite being a professional developer who uses Typescript every day
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.