Book Image

Mastering TypeScript - Fourth Edition

By : Nathan Rozentals
4.7 (3)
Book Image

Mastering TypeScript - Fourth Edition

4.7 (3)
By: Nathan Rozentals

Overview of this book

TypeScript is both a language and a set of tools to generate JavaScript, designed by Anders Hejlsberg at Microsoft to help developers write enterprise-scale JavaScript. Mastering Typescript is a golden standard for budding and experienced developers. With a structured approach that will get you up and running with Typescript quickly, this book will introduce core concepts, then build on them to help you understand (and apply) the more advanced language features. You’ll learn by doing while acquiring the best programming practices along the way. This fourth edition also covers a variety of modern JavaScript and TypeScript frameworks, comparing their strengths and weaknesses. You'll explore Angular, React, Vue, RxJs, Express, NodeJS, and others. You'll get up to speed with unit and integration testing, data transformation, serverless technologies, and asynchronous programming. Next, you’ll learn how to integrate with existing JavaScript libraries, control your compiler options, and use decorators and generics. By the end of the book, you will have built a comprehensive set of web applications, having integrated them into a single cohesive website using micro front-end techniques. This book is about learning the language, understanding when to apply its features, and selecting the framework that fits your real-world project perfectly.
Table of Contents (19 chapters)
17
Other Books You May Enjoy
18
Index

A React application

In this section of the chapter, we will build a React application that shows us a list of products. Clicking on any one of the products will show a full-screen dialog that will slide in from the right, with a detailed description of the product and some product specifications. The detail view dialog will also include a form that will allow us to specify how many products we would like to order.

Application overview

The starting screen for our application will be the product list, which shows a short-form version of each product, which includes just the name of the product, the switch type, and an image, as shown in the following screenshot:

Figure 12.6: React application showing a list of products for sale

Here, we can see a summary view of all the products that are available for sale. Each product is rendered in its own area, with the product name and switch type shown, along with a thumbnail image of the product itself. Clicking on any one...