Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Learn TypeScript 3 by Building Web Applications

By : Dubois, Georges

5 (4)

Learn TypeScript 3 by Building Web Applications

5 (4)

By: Dubois, 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

Preface

Who this book is for

What this book covers

To get the most out of this book

Get in touch

Free Chapter

Introduction to TypeScript

Introduction to TypeScript

TypeScript in a few words

JavaScript

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

Updating npm

Installing TypeScript

Hello world with TypeScript

Compiling manually using the TypeScript compiler

Variables declaration

Summary

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

Summary

Improving TodoIt with Classes and Interfaces

Improving TodoIt with Classes and Interfaces

About programming paradigms

Basic OOP principles and nomenclature

Bonus: UML

JavaScript and OOP

Overview of the TypeScript support for OOP

TypeScript classes

Fluent APIs

Custom types

TypeScript interfaces

Starting point

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!

Summary

Leveraging Generics and Enums

Leveraging Generics and Enums

What will you build?

Generics

Enums

The never keyword

String literal types

Union and intersection types

Type guards

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

Summary

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

Summary

Further reading

Introduction to Testing

Introduction to Testing

Introducing testing

Testing the population service of WorldExplorer

Summary

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

Bonus: Augury

Introducing RP and RxJS

Exploring Angular forms

Introducing Material Design and Angular Material

Summary

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

Summary

Introducing Vue.js

Introducing Vue.js

Vue.js

Hello Vue!

Understanding Vue concepts

Vue developer tools

The Vue CLI

Bonus – creating a new project using the Vue CLI

TypeScript support

Dependency injection

User interface component libraries

Routing

State management for modern web applications

Summary

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

Summary

Further reading

Diving into React, NestJS, GraphQL, and Apollo

Diving into React, NestJS, GraphQL, and Apollo

Introducing React

Understanding JSX

React elements

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

Summary

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

Summary

What's Next?

What's Next?

Retrospective – first half

Retrospective – second half

Where to go next and what to learn

Summary

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Creating the project

Once again, we have already prepared the base skeleton of the project. You can find it in the code samples folder, under 05/worldexplorer-initial:

Copy that folder.
Install the necessary dependencies using npm install.

Now, open it in your favorite editor.

What's inside of the project skeleton?

We will again be using the Parcel bundler for this application. Now that you know a bit more about bundlers, you should be able to better appreciate how this helps us to build the application.

The output of the Parcel bundling process will be stored in the dist folder, which will thus contain the production version of the code. That way, we will not mix build-time elements and production ones.

Another change...

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learn TypeScript 3 by Building Web Applications

Search

Your notes and bookmarks