TypeScript for FrontEnd developers
A practical guide to learn TypeScript from basics to advanced topics
Learn how to use TypeScript with hundred of examples (in TS only and React) answering the most frequently asked questions, solving common problems and to avoid common mistakes
In this course:
1
Learn modern JavaScript API from a TypeScript perspective
2
Learn TypeScript from basics to advanced topics
3
Learn how to use Generics and put into practice creating React components
4
Hundreds of interactive code snippets and tips
First Chapters are completely free
# Introduction
Today, almost all of the latest FrontEnd frameworks use TypeScript.
Many developers today start using frameworks like Angular and React without ever having used JavaScript and TypeScript before or with little experience.
Many developers today start using frameworks like Angular and React without ever having used JavaScript and TypeScript before or with little experience.
That's a big mistake!
With TypeScript not only will the code be more robust and less prone to errors but also serves as excellent documentation.
Furthermore when you create reusable components and abstractions you miss out on many of the benefits that proper typing can offer
# Learn TypeScript
TypeScript has emerged as an indispensable asset for developers, aiming to build scalable and robust application:
1
static typing enables developers to catch errors early in the development process
2
Intelligent code completion, easy refactoring, and advanced navigation,
3
Most o the modern front-end frameworks have now adopted it, such as Angular, React, and Vue.js.
4
NodeJS now natively supports TypeScript. So it's a fundamental tool to master if you use Fastify, NestJS or you're creating Server Action and REST API using NextJS, Qwik, Astro or Remix
Mastering TypeScript is today an investment for your career that will be useful for years.
# The TypeScript Cookbook
The idea behind this book is to provide a solid basis for avoiding common mistakes and a well-structured study path that will enable the reader to have:
1
a guided path to learn JavaScript and TypeScript in a short time
2
a cookbook where you can quickly find answers to the most common problems and scenarios
3
advice and inspiration to leverage TypeScript in front-end projects
4
a fast way to improve the quality of your front-end skills, especially if you're using React, since the book includes several examples to demonstrate how to utilize TS in your components
A valuable resource that provide all the information needed to avoid gross errors or bugs due to poor knowledge of the language and a great travel companion to quickly find the info you need on TypeScript.
# Learn with Interactive Code Playgrounds
Learn TypeScript with dozens of interactive code playgrounds about:
-
JavaScript and TypeScript most important concepts: primitive types, immutability, work in array and objects, promises and async operations and much more... This part of the book is completely free.
-
TypeScript Types: let’s delve into the language by creating alias types, using union, intersections, type guards and most of the TypeScript utility types
-
TypeScript Generics: learn how to use typescript generics to create abstractions and create a more flexible but at the same time strongly typed code
<Practice>
Each topic is accompanied by many interactive playground code in TS only or React:
Click on Play to try, study and experiment!
Click or in the editor to practice
# React examples
One of the most common problems when studying a language (such as TypeScript) is to find real-world scenarios in which to apply the concepts learned.
For this reason, in almost every lesson you will find both examples in vanilla TypeScript and several use cases
with React (and sometimes in Angular).
TOPICS
# Learn JavaScript from a TypeScript's Perspective
Discover the potential (and the limits) of JavaScript that everyone should know to be a good web developer and are often overlooked and undervalued.
The first part of the book bridges the gap between JavaScript and TypeScript providing several real-world examples using React:
- Variable Scope, Hoisting, Reference vs Value, Immutability vs Mutability
- JavaScript Classes, Arrow functions
- JavaScript modules, barrel files and dynamic imports
- Introduction to Types, Inference and several TypeScript fundamental concepts
- Template Literals, Destructuring, JS Operators
- Work with collections, arrays and objects
- Async operations with Promises, async/await, native fetch, axios and handling how to make parallels and multiple HTTP requests
- and much more...
# TypeScript Deep Dive
Mastering advanced types!
This part is your gateway to crafting highly expressive, reusable code.
- Union and Intersection Types: Combine or narrow your types for maximum flexibility.
- Utility Types: Master
Partial,Omit,Record,keyof,typeof, and more. - Mapped Types: Understand
K in Tand iterate over types like a pro. - Literal Types, index access Type and several other utilities
- Advanced Type Guards: Ensure runtime safety with compile-time precision.
- Dozens of TypeScript-only interactive code snippets for practice.
- Many ready-to-use examples and use cases
- Put the concepts into practice creating React components
# Generics and Beyond
Step into the world of Generics and unlock the ability to write flexible and scalable code.
- Generics in Practice: Write reusable types and components.
- Conditional Types: Create powerful type transformations.
- Infer and Extend: Dive into advanced patterns with infer and constraints.
You will also learn how use the concepts for the creation of several React Generics component
# React Examples
All the topics covered in the book also includes a lots of interactive code playgrounds.
- Put the concepts into practice by creating reusable React components that are safe for use.
- Learn how to use union, intersection and several utility Types to create a more robust and flexible code
- Create generic components in React defining constraints using
extends, conditional types andinfer.
# Continuously updated
The course will receive continuous updates:
1
New JS and TS examples in the lessons already available
2
Add new content about JavaScript and TypeScript
3
More React examples
4
Improvements and fixes
# The course was designed for ...
-
Beginners: Are you starting your career as a Web Developer? This is the book for you. You will find a study path to learn the secrets of language in the shortest time possible providing tips, ideas and advice to deepen.
-
Intermediate: whether you are using JavaScript to develop front-end or back-end, this book will be a great help in improving your knowledge of TypeScript and "go to the next level".
-
React Developers: who want to make the most of TypeScript in their projects to create more robust, flexible and robust components
-
Any developer who already uses (or want to start using) modern front-end frameworks such as React, Angular, Next, Vue, Svelte, Qwik, Astro, SolidJS or Web Components
# Requirements
We will assume that you already know how to program and work with conditions, loops, variables, arrays and functions.
Do you need to know React?
Knowing React is an advantage because you will understand how to take advantage of the real-world examples included in the book right away, but most of the concepts are easily applicable to other front-end frameworks.
All concepts are explained using TypeScript and the React examples are a bonus that allow to better understand the topic with real use cases.
However each example React is described to try to make it understandable to anyone, even if you have never used it before
# What you won’t find in the book...
It is important to note that this book does not cover DOM manipulation or browser APIs, but instead focuses on the core of the language and its building blocks, in both JavaScript and TypeScript.
In fact, most frontend frameworks now take care of manipulating the DOM for us, so it's essential to gain confidence in data management, how the language works and what it offers
Knowing how the DOM works is still essential but there are already hundred of books, videos and articles on this topic
Chapters
Why TypeScript
Some reasons to use TypeScript in your front-end projects
Introduction to TypeScript
A quick overview about TypeScript and how compiler works
TypeScript & ViteJS
Learn how to configure ViteJS and enable Type Checking
React and TypeScript
Variable Scopes
The differences between "var" vs "let" vs "const"
Reference vs Value
The differences between "reference" and "value" in JavaScript and how to work with shallow and deep copies
Work with Types
Understanding Types in TypeScript: "Interface" vs. "Type" vs. "Class"
TypeScript Inference
How work the "Type inference" in TypeScript that automatically determines the type
JavaScript & TypeScript classes
An high-level introduction to classes in JS and TS
Arrow Functions
The differences between regular and arrow functions
Work with JavaScript Modules
Import & Export modules, barrel files, dynamic loading & tips
React Components & TypeScript
A quick introduction to React Components in TypeScript
Template Literals
Understanding Destructuring in TypeScript
Destructuring
Understanding Destructuring in TypeScript
Work with arrays
Quick guide on JavaScript array methods, immutability and mutability
Work with Objects
Manipulate and Iterate with Objects in TypeScript and React
Promises
Asynchronous operations with JavaScript Promises
Modular Interfaces
Work with complex and nested types
Union Types
Allows a variable to hold values of multiple specified types
Literal Types (& Union)
Specify the exact values a variable can take
Intersection Types
Combines multiple types into one
TypeScript Utility Types
Dozens of example to learn the TypeScript utility types
Narrowing and Type Guards
Narrowing types with type guards, "in" operator, discriminated unions and type predicates
Enums
Define a set of named constants
any vs unknown
Learn the differences between any and unknown
never
A value that never occur
Generics
Create reusable and type-safe components, functions or classes
TypeScript & extends
Restrict a generic type to a specific subset of types
Conditional Types
Produce a type based on a condition
infer
Extract and infer a type within a conditional type, enabling dynamic type derivation.
React & Types - Mini Video course (italian)
Fabio Biondi
Fabio Biondi is Google Developer Expert in Angular and Microsoft MVP.
He is a freelance Front-End trainer, speaker, content creator and community manager
He is a freelance Front-End trainer, speaker, content creator and community manager
Book Features
Code PlayGround
You can play and experiment directly on the site using the integrated code playground
Themes
Choose between light and dark theme, whether the layout will be distributed in columns or rows and Zen Mode is coming soon
Quiz
Test your skills with Quizzes and Exercises
Layout
Choose your favourite layout: columns or row
Horizontal
Vertical
Enlarged
and much more...
Get Full Access
TypeScript for FrontEnd developers
A practical guide to learn TypeScript from basics to advanced topics...
4 months
subscription€ 1500
Instead of € 19
only € 3.8 at month
1 year
subscription€ 2500
Instead of € 29
only € 2.1 at month
• Best Buy
2 years
subscription€ 3500
Instead of € 45
only € 1.5 at month
15-day money back guarantee
By subscribing, you also help us create new free and premium content and involve more authors.
FAQ
How does the subscription work?
How does the subscription work?
The course is visible until subscription ends.
For example, if you buy a 3-year subscription today, you will have access for the next 3 years, without additional costs.
On expiry, the subscription will be automatically renewed unless you have cancelled the renewal in the "My Subscriptions" page accessible from your "Profile" page.
If you do not want to renew your subscription, we recommend that you cancel it a few days before the expiration date directly from the "My Subscriptions" page
For example, if you buy a 3-year subscription today, you will have access for the next 3 years, without additional costs.
On expiry, the subscription will be automatically renewed unless you have cancelled the renewal in the "My Subscriptions" page accessible from your "Profile" page.
If you do not want to renew your subscription, we recommend that you cancel it a few days before the expiration date directly from the "My Subscriptions" page
How do orders for schools, teams and groups work?
How do orders for schools, teams and groups work?
If you want to buy this course for your team, your students or if you are a buying group then you can take advantage of discounts.
Upon purchase, the ordering user will have immediate access to the course directly from its account.
Furthermore, coupons will also be sent to activate additional licenses.
Let’s take an example:Furthermore, coupons will also be sent to activate additional licenses.
1
You buy, for example, 5 licences
2
Your account will have instant access to the course
3
You will receive 5 additional coupons by email, that you can share with other students to allow them to activate the course independently
4
So 6 students will be able to access the course, you and other 5 users. So you will have an extra account for free
IMPORTANT: only the user who purchased the course can renew the subscription, change the payment method or cancel the subscription.
Can I receive the invoice?
Can I receive the invoice?
Sure! Remember to enter your billing information at the time of purchase, before confirming your order
Is there a refund if I am not satisfied?
Is there a refund if I am not satisfied?
You can request a refund within 15 days of the date of purchase at info@learnbydo.ing
Questions?
Questions?
Write us an email at info@learnbydo.ing
Start today for free!
Create a LearnByDo.ing account for free to see all the protected content, get exclusive material, join giveaways, and use all the platform’s features