JS & TS Fundamentals
JavaScript API
TypeScript Deep Dive
Work with Generics
# Introduction
If you are reading this page I assume that you already have some interest in the topic and therefore probably many of the concepts may be familiar or trivial.
However, I recommend you to browse the examples to verify that it is really so.
This page, and the whole book, may be useful if:
1
You are still undecided on why investing in TypeScript is important
2
You are a Front-End developer and do not know most of the concepts described on this page. In that case I strongly advise you to fill the gap
3
You are curious to know when TypeScript can be really useful
4
You want to get an idea of the topics covered by the book
Having trouble understanding the code on this page?
If you are new to TypeScript or the React world, this page may seem difficult to understand.
If so, you are in the right place!
This book will help you understand these and many more concepts.
# Use the interactive PlayGround
<Practice>
This book includes several interactive code playgrounds. Play with them!
Click or in the editor to practice
See the output in console:
TypeScript Example
Tailwind Warning in console
Ignore a possible warning in console generated by Tailwind , that is the CSS framework we often use in our snippets.
The reason we see it is that we are using a version of Tailwind not suitable for production and the reason why we chose this way is that the production version would require a Node environment, PostCSS, the Tailwind compiler and other steps that would slow down the interactive playground
See the preview of the React component:
React Example
# Main Typescript features
Let’s now discuss with some examples of code why TypeScript can be very useful in the daily development in React, Angular, Vue and any other latest generation front-end frameworks and libraries
More info about the book...
If you want to know more about the book I invite you to consult the book’s presentation page where you will also find a lot of information on why you should invest in TypeScript.
This is only a small part of what you will learn in the book but I think it’s enough to make you understand the potential of language when well exploited in a front-end framework/library.
# Excellent Integration with React, Angular and Other Frameworks
Most of the last generation frameworks and libraries today use TypeScript instead of vanilla JavaScript.
React, for example, benefits from TypeScript’s static typing through features like typed props and state, enhancing reliability and predictability.
Although React is written in vanilla JavaScript it can be used in TypeScript and for many years, most React applications have been written using this language.
Even if you have never used React, don’t worry.
It can be a way to start understanding something and anyway whatever the frontend framework you use, the notions will still be useful.
Anyway, if you decide to use React today I would recommend you start with TypeScript right away
In the following example we create a simple React component that accepts as properties:
- a
labelof typestring - an
onClickfunction without parameters
src/Button.tsx
So you cannot pass a
number to label or missing the onClick property: you will receive a compilation error:App.tsx (usage)
TypeScript generates a compile error when we pass a
number to the label property (that should be a string):
The same approach can be used to type states (
useState), functions, reducers and so on...Unlike React, Angular was written in TypeScript and it is therefore mandatory to know it to be able to take full advantage of the framework.
In this example we create a trivial reusable
Alert component using Angular v.19 by passing as property:message: the text to be displayed in the alert, of typestring.theme:darkorlight, which uses two TypeScript concepts to define its type: the literal types (darkandlight) and the union type using (|)
src/shared/alert.component.ts
src/app.component.ts
Other frameworks...
All the concepts explained in the book can be also used in most of the modern front-end framework (and in NodeJS too).
# Enhanced Developer Experience
With intelligent code completion, easy refactoring, and advanced navigation, TypeScript transforms and improve your coding experience.
Developers can work more efficiently, with tools that provide meaningful insights into the codebase. Say goodbye to unpredictable behaviors and hello to intuitive coding.
For example, TypeScript can warn you if an object is potentially
null or undefined and will block you in the build phase with a compiler error:
The book will then describe different strategies for solving this problem.
# Enhanced Type Safety and Error Prevention
With frameworks like React or Angular heavily relying on component-based architecture and extensive prop passing, TypeScript offers a robust type system that helps prevent common errors.
By using static typing, developers can ensure components receive the correct data types, catching issues at compile time rather than runtime. This reduces bugs and enhances application stability, especially as your application scales.
Here is an Angular component to display a map using
Leaflet and as you can see the editor not only suggests properties but also their type.If we pass a property that does not exist or with an incorrect type, we will receive a compilation error:
# Readable and Maintainable Code
TypeScript emphasizes clear, explicit code, which boosts readability.
This clarity is crucial in large codebases typical of React applications, aiding both current and future developers in understanding and maintaining the code.
The added structure provided by TypeScript leads to more consistent and self-documenting code, making it easier to onboard new team members or revisit projects after time away.
Record is a TypeScript utility type that allows to create object types in a different way.
It may not seem useful in this example but together with the other dozens of utilities allows you to describe your types more expressively and precisely:src/App.tsx
# Narrowing, TypeGuards and Discriminated Unions
In React components and especially within JSX templates we can use conditions like
if, switch or ternary operators to restrict types, so only the correct properties are available in a specific branch of the JSX.In this example of a React
Notification component we use a discriminated union so each branch of the template will only show the properties available for a specific notification type:
# Intersection Types
In TypeScript, an intersection type combines multiple types into one, requiring an entity to satisfy all included types. For example
Anyway this powerful tool is often useful in React for several reasons.
For example, we can type the properties of a component, i.e.
CustomButton,accept custom properties (i.e. icon) and at the same time add the support for all the properties/attributes of a native HTML button:src/App.tsx
# Generics
In TypeScript, generics help to write functions, classes, and interfaces that work with a variety of types without sacrificing the type safety TypeScript is known for.
This is especially useful when we work in the front-end area and want to write flexible, reusable and at the same time safely typed components.
The following snippet demonstrates how to write a simple generic and reusable component in React: a
List component is designed to handle any type of data:Listis a reusable generic component that doesn't dictate how its items are rendered.- The parent component (
App) passes both the data (items) and a rendering function (renderItem) to customize the output (the JSX template for each item).
src/List.tsx
src/App.tsx
When using the
List component, the renderItem property will be dynamically typed, providing the properties of the objects regardless of the array's type.
This would not be possible without using the Generics (or using
any) making our code much less solid and giving us the chance to make mistakes and use the component in the wrong way.# More about Generics
Generics, Conditional Types and TypeScript features such as
extends and infer help you to create amazing reusable, flexible and, at the same time, robust components.For example, we can dynamically add properties to a React component type based on a condition.
In the following example we create the type for a
Button component that will have different properties (href or onClick) depending on whether it is a variant: link or button:src/Button.tsx
Usage
This is only an extract of what you will be able to do reading this book and in general after studying TypeScript in depth
