What does the ampersand (&) mean in a TypeScript type definition? What does the ampersand (&) mean in a TypeScript type definition? typescript typescript

What does the ampersand (&) mean in a TypeScript type definition?


& in a type position means intersection type.

More from typescript docs on Intersection Types:

https://www.typescriptlang.org/docs/handbook/2/objects.html#intersection-types

Citation from the docs linked above:

Intersection types are closely related to union types, but they are used very differently. An intersection type combines multiple types into one. This allows you to add together existing types to get a single type that has all the features you need. For example, Person & Serializable & Loggable is a type which is all of Person and Serializable and Loggable. That means an object of this type will have all members of all three types.

For example, if you had networking requests with consistent error handling then you could separate out the error handling into it’s own type which is merged with types which correspond to a single response type.

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;const handleArtistsResponse = (response: ArtistsResponse) => {  if (response.error) {    console.error(response.error.message);    return;  }  console.log(response.artists);};


Intersection type in Typescript

  • A & in TS in the context of a types means an intersection type.
  • It merges all properties of 2 object types together and creates a new type

Example:

type dog = {age: number, woof: Function};type cat = {age: number, meow: Function};// Type weird is an intersection of cat and dog// it needs to have all properties of them combinedtype weird = dog & cat;const weirdAnimal: weird = {age: 2, woof: () => {'woof'}, meow: () => {'meow'}}interface extaprop {    color: string}type catDog = weird & extaprop; // type now also has added colorconst weirdAnimal2: catDog = {age: 2, woof: () => {'woof'}, meow: () => {'meow'}, color: 'red'}// This is different form a union type// The type below means either a cat OR a dogtype dogOrCat = dog | cat;