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.

Related Content you might be interested in

Current Title:

Small book image
Learn TypeScript 3 by Building Web Applications
Sebastien Dubois | Alexis Georges
Nov, 2019 | 804 pages
Small book image
Learning TypeScript 2.x
Remo H Jansen
Apr, 2018 | 536 pages
Small book image
Learning Angular
Pablo Deeleman | Aristeidis Bampakos
Sep, 2020 | 430 pages
Small book image
Learning Angular
Pablo Deeleman | Aristeidis Bampakos
Feb, 2023 | 446 pages
Table of Contents (15 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
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
2
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
3
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
4
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
5
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
6
Introduction to Testing
Introduction to Testing
Introducing testing
Testing the population service of WorldExplorer
Summary
7
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
8
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
9
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
10
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
11
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
12
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
13
What's Next?
What's Next?
Retrospective – first half
Retrospective – second half
Where to go next and what to learn
Summary
14
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

The React developer tools

We have now explored the most important features of React to be aware of when starting out. Before we take a look at how to use TypeScript with React, we're going to learn about some of the tools that can assist us while developing React applications.

First of all, the React team maintains an official web browser plugin called the React developer tools, allowing users to inspect running React applications.

Similar to the Vue developer tools, it allows users to take a look at the component tree, the state of each component, and much more:

React developer tools in Google Chrome
Did you notice the Profiler tab? Here's a guide explaining how to use that feature to diagnose performance issues in React applications: https://www.netlify.com/blog/2018/08/29/using-the-react-devtools-profiler-to-diagnose-react-app-performance-issues.

You can download...

Previous Section
End of Section 8
Next Section