Learn TypeScript 3 by Building Web Applications by Sebastien Dubois -- Read -- Imperial Library of Trantor

Index

Title Page Copyright and Credits

Learn TypeScript 3 by Building Web Applications

Dedication About Packt

Why subscribe?

Foreword Contributors

About the authors About the reviewers Packt is searching for authors like you

Preface

Who this book is for What this book covers To get the most out of this book

Download the example code files Download the color images Conventions used

Get in touch

Reviews

Introduction to TypeScript

TypeScript in a few words JavaScript

JavaScript's history in a nutshell ECMAScript ECMAScript evolution and support JavaScript gotchas

How can TypeScript help?

Enhanced JavaScript Future JavaScript today Static typing Structural typing Types for JavaScript libraries .NET and Java developers will feel at home

What you'll need to install

Text editor Version control system Shell JavaScript runtime Package manager TypeScript

Installing VS Code

Windows Windows (shell) Linux (GUI) Linux (shell) Extensions

Installing and configuring Git

Windows Linux (shell) Configuring git

Downloading the book samples Installing Node.js and npm

Windows Git BASH Linux (shell)

Updating npm

Linux Windows

Installing TypeScript Hello world with TypeScript

Creating the project Hello (Type/Java)Script!

Compiling manually using the TypeScript compiler Variables declaration

Basic TypeScript types A tiny bit of type safety can't hurt

Summary Further reading about ECMAScript

Building TodoIt - Your Own Web Application with TypeScript

What will you build? Creating the project using npm Introducing npm

package.json Installing dependencies with npm Installing dependencies with npm and package.json The node_modules folder content Updating dependencies with npm package-lock.json Defining and executing npm scripts When not to install packages globally

Adding TypeScript to the project Configuring the TypeScript compiler Creating the TodoIt application

Opening the project in VS Code Defining the basic application structure Leveraging VS Code support for TypeScript Building from the Terminal Using Browsersync to refresh automatically Implementing the user interface Loading the TodoIt code and checking the browser console Creating the todo list with TypeScript arrays Getting hold of inputs and casting using the as operator Adding todo items to the list Listing existing todo items using lambda expressions Listing existing todo items using loops Filtering existing todo items using the ES2015 TypeScript support Removing a single todo item

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

About programming paradigms Basic OOP principles and nomenclature

Encapsulation and classes Abstraction Inheritance and abstract classes Interfaces Polymorphism Composition Composition over inheritance

Bonus: UML

Class diagrams

JavaScript and OOP Overview of the TypeScript support for OOP TypeScript classes

Basics Bonus: How TypeScript converts classes to JavaScript Fields, methods, visibility, and constructors Inheritance

Fluent APIs Custom types

Inline types Type aliases

TypeScript interfaces

Defining contracts Naming custom types using interfaces Extending interfaces Interfaces only exist at compile time Interfaces versus type aliases and inline types Interfaces versus classes

Starting point Designing the domain model of TodoIt v2

First proposal Single responsibility principle (SRP) Law of Demeter (LoD) Open/closed principle Using the Model View Controller (MVC) design pattern

Implementing the new domain model

Creating the TodoItem class Creating the TodoList class A note about TypeScript's ReadonlyArray

Implementing the view

Creating the TodoListView interface Implementing the TodoListView interface

Implementing the controller layer

Creating the TodoListController interface Implementing the TodoIt controller class

Initializing TodoIt Isolating the utility function Updating the HTML page Job done, congratulations! Summary

Leveraging Generics and Enums

What will you build? Generics

The benefits of using generics An example without generics An example with generics An example with generic functions and interfaces An example with classes Generic constraints

Enums

Numerical enums String enums const enums

The never keyword String literal types Union and intersection types Type guards

The typeof keyword The instanceof keyword and the Visitor pattern User-defined type guards and the is operator And more on type guards

Creating the project Designing the model

The core domain model High-level design – first proposal The service layer design pattern High-level design – second proposal

Implementing the domain model Defining the media service interface Storing data on the client side

LocalStorage and SessionStorage IndexedDB

Implementing the media service

Library choice Introduction to the Promise API TypeScript type definitions (typings) Adding localForage to the project Service implementation Handling serialization/deserialization Installing class-transformer and reflect-metadata Adding class-transformer decorators to domain classes Implementing the saveMediaCollection method Implementing the loadMediaCollection method Implementing the getMediaCollectionIdentifiersList method Implementing the removeMediaCollection method

Implementing the view

CSS HTML page

Defining the view interface Implementing the HTMLMediaManView class

The base structure Implementing basic validation using the HTML Form Validation API Why exceptions should not be used in this case Implementing the clearBookCollections method Implementing the displayErrorMessage method Implementing the renderBookCollection method Implementing the clearNewBookCollectionForm method Implementing the renderBook method Implementing the removeBookCollection method Implementing the getNewBookDetails method using keyof and typeof Bonus – the keyof operator Bonus – mapped types Implementing the clearNewBookForm method Implementing the removeBook method

Creating the controller layer

Defining the interface Implementing the MediaManController class Implementing the reloadBookCollections method Implementing the createBookCollection method Implementing the removeBookCollection method Implementing the createBook method Implementing the removeBook method

Initializing the application Summary

Coding WorldExplorer to Explore the Population of the World

Understanding modules

Why do we need modules? A bit of history about JavaScript modules The Revealing Module pattern The AMD and CommonJS modules UMD modules ES modules

Loading and bundling modules

Module loaders Bundlers

Exploring TypeScript modules

Export and import syntax Export statements Re-exports and barrels Barrels Bonus: Leveraging modules in MediaMan Ambient modules Configuring module transpilation Advanced concepts Namespaces

Introducing module resolution

Resolution strategies Resolving relative imports Resolving non-relative imports Configuring module resolution

What will you build? Bonus: REST, RESTful and web APIs World Bank Open Data APIs

Country information Indicators Population information

Understanding the Fetch API Using the unknown keyword Chaining promises Understanding async/await and generators

Asynchronous code that looks synchronous Compatibility

Adding runtime type checks

TypeScript non-goals Use cases io-ts io-ts examples

Creating the project

What's inside of the project skeleton?

Designing the model

Core domain

Implementing the domain model Implementing the population service

Defining the contract Creating the service implementation skeleton Implementing the getAllCountries method Implementing the getCountry method Implementing the getTotalPopulation method Implementing the other methods Creating the service layer barrel

High-level design

The controller package The view package

Implementing the view layer

HTML template Creating the view package Implementing the view model using a Data Transfer Object (DTO) Defining the view contract Installing Chart.js Creating the view implementation skeleton Implementing the displayCountries method Implementing the displayYears method Implementing getChartFormDetails and using the property shorthand notation Implementing the displayChart method Creating the view layer barrel

Implementing the controller layer

Creating the controllers package Defining the controller contract Creating the controller implementation skeleton Implementing the loadCountries method Implementing the loadYears method with generators Implementing the renderChart method Implementing the UnreachableCaseError class Creating the controller layer barrel

Initializing our application Leveraging TypeScript path mappings Summary Further reading

Modules Namespaces RESTful APIs The Fetch API Async and await io-ts and fp-ts Generators

Introduction to Testing

Introducing testing

Code quality and testing Test types

Functional tests Non-functional tests

Testing approach and mindset Mocks and stubs The test pyramid Test automation and the Definition of Done (DoD) Test Driven Development Behavior Driven Development JavaScript testing libraries and tools

Unit testing E2E testing and other tools

Testing the population service of WorldExplorer

Installing and configuring Jest Using npm script hooks Writing basic tests Testing asynchronous code Implementing positive and negative tests for getAllCountries Spying on methods with Jest

Summary

Discovering Angular, Angular Material, and RxJS

Learning about modern web applications

Server-side rendering SPAs Mobile-first and responsive web design (RWD) PWAs Modern web frameworks

Understanding TypeScript decorators

What are decorators? When are decorators useful? Aspect-Oriented Programming

Exploring Angular

What is Angular? Model View Whatever (MV*) Angular CLI Bonus: Schematics Bonus: Hello world with the Angular CLI

Learning the Angular application architecture Exploring core Angular concepts

Modules Components Component templates and data bindings Component bindings, HTML attributes, and DOM properties Defining component inputs and outputs Smart versus dumb components Component life cycle hooks Routing Directives Pipes Change detection Services DI Learning about injectors and the singleton design pattern A brief note about the root application injector Angular's bootstrap process Angular workspaces and the angular.json file Angular testing support and coverage reports Angular testing utilities

Bonus: Angular Console Bonus: Augury Introducing RP and RxJS

RP libraries RxJS basics − observables RxJS basics − observers RxJS basics − subscriptions RxJS basics − subjects RxJS basics − hot and cold observables RxJS basics − operators and marble diagrams

Exploring Angular forms

Template-based forms Reactive forms

Introducing Material Design and Angular Material Summary Further reading

PWAs TypeScript decorators RP and RxJS Angular

CLI Router Modules Life cycle hooks Directives Components Pipes Services DI Change detection Forms Miscellaneous

Rewriting MediaMan Using Angular and Angular Material

What will you build? Creating the project

Creating the project using the CLI Reviewing the application structure

Extending another TypeScript configuration Folder structure and the LIFT principle

Adding required dependencies Starting the development server Defining the application title

Integrating the shared logic Implementing the book module

Creating the module Implementing the bookCollection methods Implementing the book method Creating the book page component Adapting the book module Importing the book module Migrating the styles Implementing book creation Displaying book collections Adding the components to the page

Revisiting the user interface with Angular Material

Installing Angular Material Adding a toolbar Making the application responsive Revisiting the book page Improving the book creation component Improving the book list component Cleaning things up

Summary

Introducing Vue.js

Vue.js Hello Vue! Understanding Vue concepts

Directives Components and props Component prop types and validation rules The internal state of a component Listening to events that have been triggered by child components Single File Components (SFCs) Similarities with Angular Computed properties Watchers Filters Lifecycle hooks Mixins and pure functions Render functions Testing support

Vue developer tools The Vue CLI Bonus – creating a new project using the Vue CLI TypeScript support

Compiler configuration SFC with vue-class-component Splitting components into multiple files

Dependency injection

Built-in support TypeScript support Limitations Improving our code with ES2015 symbols Late binding and TypeScript definite assignment assertions The SL design pattern and InversifyJS SL using InversifyJS and reflect-metadata Better InversifyJS integration

User interface component libraries

Vuetify Buefy Quasar Element And many others

Routing State management for modern web applications

Naive approach – propagating state changes using custom events and props Broadcasting state changes Simple store pattern Redux and the unidirectional data flow A note about pure functions VueX

Summary Further reading

Vue

General Components Computed properties Filters Mixins Render functions Testing support Router VueX

TypeScript

Symbols

Creating LyricsFinder with Vue.js

What will you build? High-level design and technical stack

Schema Music service User interface TypeScript

Getting started

Creating the project Starting the development server Project structure and conventions

Getting a MusixMatch API key Configuring InversifyJS Creating the home view

Creating the skeleton Installing and configuring Vue Router Installing and configuring Element

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

Introducing React

History Application architecture Numbers, numbers, numbers Evolution and support

Understanding JSX

Introduction JSX is not HTML Expressions Attributes Element trees

React elements Components and props

Class components Function components Object destructuring Component state Bonus: Improving rendering performance Lifecycle hooks Emitting and handling events Communication between distant components Controlling rendering

Rendering lists

Content projection/templating

Exploring React hooks

Defining state with the useState hook Array destructuring Handling side-effects with the useEffect hook

The React developer tools Taking advantage of the Create React App (CRA) tool

Creating a project using create-react-app File and folder structure Generating a TypeScript project

Leveraging TypeScript with React

JSX support through TSX files Class components with TypeScript Class components with internal state Types provided by React typings Class components accepting props Functional Components with TypeScript Introducing the prop-types library Going further with Functional Components

Discovering NestJS in a jiffy

Architecture CLI Modules Dependency injection Controllers and routing And everything else

Introducing GraphQL

Introduction Queries Schema, validation, and resolvers Apollo The NestJS GraphQL plugin

Summary Further reading

React

General JSX CreateElement Components Function components State management Component lifecycle Context Hooks Create React App TypeScript and React

NestJS GraphQL Apollo NestJS support for GraphQL TypeScript

Object destructuring Array destructuring

Revisiting LyricsFinder

What will you build? High-level design and technical stack

Schema Frontend – user interface with React Bootstrap Frontend – API calls Backend TypeScript

Getting started

Creating the project Project structure and conventions Backend – creating and configuring the application Starting the development servers

Backend – adding the necessary dependencies Backend – implementing the GraphQL API with a first resolver

Adding your MusixMatch API key Creating the song module Creating the song GraphQL resolver Creating the song DTO and decorating it for GraphQL Implementing the song resolver and leverage NestJS features

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

Creating the lyrics view skeleton

Frontend – creating the search component

Creating the search component skeleton Defining the component hierarchy Adding state and binding our input to it Clearing the input Adding the search handler Adding props to communicate with the outside world

Frontend – integrating with the backend API

Adding the required dependencies Defining GraphQL queries and generating code using Apollo Bonus: Tagged template literals Creating, configuring, and using an Apollo GraphQL client

Frontend – creating and using the songs list component

Creating the skeleton Defining the props Rendering the list of songs

Frontend – loading lyrics and redirecting to the lyrics page Frontend – implementing the lyrics page

Adding icons Creating an ArtistsList component Showing a message when there are no songs or no artists Adding loading indicators

Summary

What's Next?

Retrospective – first half Retrospective – second half Where to go next and what to learn Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think

← Prev
Back
Next →

← Prev
Back
Next →