Book Image

Learn TypeScript 3 by Building Web Applications

By : Sebastien Dubois, Alexis Georges

Book Image

Learn TypeScript 3 by Building Web Applications

By: Sebastien Dubois, Alexis Georges

Overview of this book

TypeScript is a superset of the JavaScript programming language, giving developers a tool to help them write faster, cleaner JavaScript. With the help of its powerful static type system and other powerful tools and techniques it allows developers to write modern JavaScript applications. This book is a practical guide to learn the TypeScript programming language. It covers from the very basics to the more advanced concepts, while explaining many design patterns, techniques, frameworks, libraries and tools along the way. You will also learn a ton about modern web frameworks like Angular, Vue.js and React, and you will build cool web applications using those. This book also covers modern front-end development tooling such as Node.js, npm, yarn, Webpack, Parcel, Jest, and many others. Throughout the book, you will also discover and make use of the most recent additions of the language introduced by TypeScript 3 such as new types enforcing explicit checks, flexible and scalable ways of project structuring, and many more breaking changes. By the end of this book, you will be ready to use TypeScript in your own projects and will also have a concrete view of the current frontend software development landscape.

Preface

Who this book is for

What this book covers

To get the most out of this book

Free Chapter

Introduction to TypeScript

Introduction to TypeScript

TypeScript in a few words

How can TypeScript help?

What you'll need to install

Installing VS Code

Installing and configuring Git

Downloading the book samples

Installing Node.js and npm

Installing TypeScript

Hello world with TypeScript

Compiling manually using the TypeScript compiler

Variables declaration

Further reading about ECMAScript

Building TodoIt - Your Own Web Application with TypeScript

Building TodoIt - Your Own Web Application with TypeScript

What will you build?

Creating the project using npm

Introducing npm

Adding TypeScript to the project

Configuring the TypeScript compiler

Creating the TodoIt application

Debugging your code in the web browser

Debugging your code in VS Code

Generating source maps for easier debugging

Improving TodoIt with Classes and Interfaces

Improving TodoIt with Classes and Interfaces

About programming paradigms

Basic OOP principles and nomenclature

JavaScript and OOP

Overview of the TypeScript support for OOP

TypeScript classes

TypeScript interfaces

Designing the domain model of TodoIt v2

Implementing the new domain model

Implementing the view

Implementing the controller layer

Initializing TodoIt

Isolating the utility function

Updating the HTML page

Job done, congratulations!

Leveraging Generics and Enums

Leveraging Generics and Enums

What will you build?

The never keyword

String literal types

Union and intersection types

Creating the project

Designing the model

Implementing the domain model

Defining the media service interface

Storing data on the client side

Implementing the media service

Implementing the view

Defining the view interface

Implementing the HTMLMediaManView class

Creating the controller layer

Initializing the application

Coding WorldExplorer to Explore the Population of the World

Coding WorldExplorer to Explore the Population of the World

Understanding modules

Loading and bundling modules

Exploring TypeScript modules

Introducing module resolution

What will you build?

Bonus: REST, RESTful and web APIs

World Bank Open Data APIs

Understanding the Fetch API

Using the unknown keyword

Chaining promises

Understanding async/await and generators

Adding runtime type checks

Creating the project

Designing the model

Implementing the domain model

Implementing the population service

High-level design

Implementing the view layer

Implementing the controller layer

Initializing our application

Leveraging TypeScript path mappings

Further reading

Introduction to Testing

Introduction to Testing

Introducing testing

Testing the population service of WorldExplorer

Discovering Angular, Angular Material, and RxJS

Discovering Angular, Angular Material, and RxJS

Learning about modern web applications

Understanding TypeScript decorators

Exploring Angular

Learning the Angular application architecture

Exploring core Angular concepts

Bonus: Angular Console

Introducing RP and RxJS

Exploring Angular forms

Introducing Material Design and Angular Material

Further reading

Rewriting MediaMan Using Angular and Angular Material

Rewriting MediaMan Using Angular and Angular Material

What will you build?

Creating the project

Integrating the shared logic

Implementing the book module

Revisiting the user interface with Angular Material

Introducing Vue.js

Introducing Vue.js

Understanding Vue concepts

Vue developer tools

Bonus – creating a new project using the Vue CLI

TypeScript support

Dependency injection

User interface component libraries

State management for modern web applications

Further reading

Creating LyricsFinder with Vue.js

Creating LyricsFinder with Vue.js

What will you build?

High-level design and technical stack

Getting started

Getting a MusixMatch API key

Configuring InversifyJS

Creating the home view

Implementing the basic layout of the application

Creating the search component and using Vue slots

Handling search using the MusicService

Creating and using the songs list component

Creating and using the lyrics view

Further reading

Diving into React, NestJS, GraphQL, and Apollo

Diving into React, NestJS, GraphQL, and Apollo

Introducing React

Understanding JSX

Components and props

Rendering lists

Exploring React hooks

The React developer tools

Taking advantage of the Create React App (CRA) tool

Leveraging TypeScript with React

Discovering NestJS in a jiffy

Introducing GraphQL

Further reading

Revisiting LyricsFinder

Revisiting LyricsFinder

What will you build?

High-level design and technical stack

Getting started

Backend – adding the necessary dependencies

Backend – implementing the GraphQL API with a first resolver

Backend – importing and configuring the GraphQL NestJS module

Backend – testing the API using the GraphQL playground

Backend – adding support for artists and lyrics

Frontend – installing React Bootstrap

Frontend – installing React Router

Frontend – creating the home view skeleton

Frontend – creating the search component

Frontend – integrating with the backend API

Frontend – creating and using the songs list component

Frontend – loading lyrics and redirecting to the lyrics page

Frontend – implementing the lyrics page

What's Next?

Retrospective – first half

Retrospective – second half

Where to go next and what to learn

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Revisiting the user interface with Angular Material

At this point, we have migrated our application to Angular, but our user interface is still exactly the same. At this point, you might be thinking: we could certainly create a more beautiful UI now.

In the previous chapter, we talked a bit about Material Design and Angular Material. We'll now refactor the user interface to use Angular Material.

If you want to make sure to that you have the same starting point as we do to follow along, then you can copy the Chapter08/mediaman-v2 folder from this book's sample code. This version of the application includes all of the changes that we have discussed so far in this chapter.

Let's start by installing Angular Material into our project.

Installing Angular Material

...