Loading...

TypeScript for FrontEnd developers

JS & TS Fundamentals

Introduction to TypeScript

TypeScript & ViteJS

React and TypeScript

Variable Scopes

Reference vs Value

(⚛) React, useState and Spread

Work with Types

(⚛) React and Types

(⚛) React, strictNullChecks, conditional templates and optional chaining

TypeScript Inference

(⚛) React and TypeScript Inference

JavaScript & TypeScript classes

Arrow Functions

(⚛) React and Arrow Functions

Work with JavaScript Modules

Dynamic Imports

React Components & TypeScript

(⚛) React and useState hook

(⚛) React and Barrel files

(⚛) React Lazy Components

JavaScript API

Template Literals

(⚛) Template Literals in React

(🅰) Template Literals in Angular

(⚛) React Components and Destructuring

Work with arrays

(⚛) React, Map and Arrays

Work with Objects

(⚛) React and Objects

native fetch API (+ React example)

Fetch data with Axios (+ React example)

Promise Combinators

Promise.allSettled (+ React example)

async/await (+ React example)

TypeScript Deep Dive

Modular Interfaces

React and Union Type

Literal Types (& Union)

React and Literal Types

Intersection Types

(⚛) React and Intersection types

(⚛) Components that extends HTML Elements

(⚛) extends img element

TypeScript Utility Types

(⚛) React and Partial utility type

Optional<T, K> (utility-types)

ReadOnly & DeepReadonly

(⚛) React and TypeScript typeof utility

Extract and Exclude

(⚛) React and TypeScript Record utility

(⚛) React and ReturnType

index access type

const assertions (as const)

Template Literal Type

(⚛) React and Literal Types

Uppercase & other String Manipulation types

(⚛) React and Awaited

Narrowing and Type Guards

Narrowing with typeof (+ React Example)

Discriminated Unions (+ React Example)

Type Predicates (+ React example)

unknown parsing and throw errors

fetch, unknown and type predicates

Work with Generics

Multiple generic parameters

Generics & Promise

Generic in Types

(⚛) React and Generic Components - Example

TypeScript & extends

extends and object key

React and Extends Types

Conditional Types

Conditional and Template Literal Types

Distributive Conditional Types

Narrowing with Conditional Types and never

Utility Types & conditional types

Nested Conditional Types

(⚛) React and Conditional Types: real-world example

infer and promises

infer and functions

infer and deep arrays

infer, conditional types and type guards

(⚛) React and infer: real-world example

Bonus Videos: React & Types - Mini course (italian)

React & TypeScript Union Type

React & Literal Types

React and Intersection Type

React & TypeScript Discriminated Unions

Loading...

Send your feedback

React, Map and Arrays

3 snippets

8 mins

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Simple List

The following example shows how to render an array of elements using the array map method.

Each element of the array is simply mapped to a JSX template.

Preview

React Example

# Move data to State

We can also move the array into a React state that we type as an array of users (User[]):

React List

URL

/courses/typescript/typescript-for-frontend-developers/140-array-methods/10-react-map-and-arrays

EMAIL

ADD CODE SNIPPET

ADD IMAGE/SCREENSHOTS

VOTE

54321

background handwritten

# Mutate the List

Unblock the content

Sign In

It's completely free!

Your email

Password

Don’t have an account yet?

Forgot password?

Or did you not receive
the CONFIRMATION email?

Literal and Union Types

What does gender: 'M' | 'F' mean?

The TypeScript definition gender: 'M' | 'F' is a type annotation indicating that the property gender can only have one of two string literal values: 'M' or 'F'.

In this context, we are introducing two new concepts: Literal Types and Union Types:

Literal Types: Instead of using a general string, we can precisely define the allowed values for the property gender, which are 'M' or 'F'. This helps prevent bugs by rejecting any invalid assignments (for example, any other string).
Union Types: The | (pipe) operator is used to define a union type. This allows the gender property to be either 'M' or 'F', but nothing else.

Topics

Courses

Bookmarks

there are no topics

Home•Blog•Login•Register