Learn TypeScript 3 by Building Web Applications: Gain a solid understanding of TypeScript, Angular, Vue, React, and NestJS

Cover
Title Page
Copyright and Credits
Dedication
About Packt
Foreword
Contributors
Table of Contents
Preface
Chapter 1: 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
Chapter 2: 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 7: 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
Chapter 8: 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
Chapter 9: 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
Chapter 10: 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
Chapter 11: 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
Chapter 12: 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
Appendix A: What's Next?
	Retrospective – first half
	Retrospective – second half
	Where to go next and what to learn
	Summary
Other Books You May Enjoy
Index