Name: Learn TypeScript 3 by Building Web Applications
Author: Sebastien Dubois Alexis Georges Basarat Ali Syed
ISBN: 9781789617863

微信读书书城Learn TypeScript 3 by Building Web Applications

首页我的书架登录

Learn TypeScript 3 by Building Web ApplicationsSebastien Dubois Alexis Georges Basarat Ali Syed

微信读书推荐值

评分不足

3人点评

Learn TypeScript 3 by Building Web Applications

Sebastien Dubois Alexis Georges Basarat Ali Syed

扉页
coverpage
+书签
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

简介

版权

Learn TypeScript 3 by Building Web Applications