TTT (TypeScript Tips and Tricks)

Sylvain DEDIEU

Frontend engineer – #ui-foundations

Agenda

1

2

3

Type manipulation

Type affectation

Modern Javascript hidden features

         s.dedieu@criteo.com

Sylvain DEDIEU

Frontend engineer – #ui-foundation

         s.dedieu@criteo.com

         s.dedieu@criteo.com

Type Manipulation

Intersection

interface ErrorHandling {
  success: boolean;
  error?: { message: string };
}
 
interface ArtworksData {
  artworks: { title: string }[];
}
 
interface ArtistsData {
  artists: { name: string }[];
}
 
// These interfaces are composed to have
// consistent error handling, and their own data.
 
type ArtworksResponse = ArtworksData & ErrorHandling;
type ArtistsResponse = ArtistsData & ErrorHandling;
Example of a Typescript Type intersection

Union

Generic

Partial

Pick

Omit

Extract

Mapped

Type Affectation

Standard

As

Satisfies

Modern Javascript hidden features

Spread syntax mastering (1/3)

Spread syntax mastering (2/3)

Spread syntax mastering (3/3)

StructuredClone

The Map Object (1/3)

The Map Object (2/3)

The Map Object (3/3)

Playing with URLs

Image lazy-loading

TTT (Type

By Dedieu Sylvain

TTT (Type

  • 128