<div class="page" id="readability-page-1"><article><div>Let’s say, we are building a component to display some images (with lazy loading):
<pre><code>const LazyImage = (props: ImageProps) =&gt; {
 ...
}
</code></pre>
And this component takes some properties (<code>ImageProps</code>) that came from the two imaginary types:
<pre><code>type ImageSource {
 imageUrl: string;
 preloadUrl?: string;
}
 
type ImageMetadata {
 fileSize: number;
 width?: number;
 height?: number;
}
</code></pre>
The most inefficient way is to redefine everything from <code>ImageSource</code> and <code>ImageMetadata</code> into a new type <code>ImageProps</code>:
<pre><code>type ImageProps {
 imageUrl: string;
 preloadUrl?: string;
 fileSize: number;
 width?: number;
 height?: number;
}
</code></pre>
The better way to do it, is to define a new <code>ImageProps</code> that is an intersection between <code>ImageSource</code> and <code>ImageMetadata</code> with the <code>&amp;</code> operator:
<pre><code>type ImageProps = ImageSource &amp; ImageMetadata
</code></pre>
The order of the types when declaring an intersection doesn’t matter, so this will also work:
<pre><code>type ImageProps = ImageMetadata &amp; ImageSource
</code></pre>
</div></article></div>

Let’s say, we are building a component to display some images (with lazy loading):
const LazyImage = (props: ImageProps) => {
    ...
}

And this component takes some properties (ImageProps) that came from the two imaginary types:
type ImageSource {
    imageUrl: string;
    preloadUrl?: string;
}
 
type ImageMetadata {
    fileSize: number;
    width?: number;
    height?: number;
}

The most inefficient way is to redefine everything from ImageSource and ImageMetadata into a new type ImageProps:
type ImageProps {
    imageUrl: string;
    preloadUrl?: string;
    fileSize: number;
    width?: number;
    height?: number;
}

The better way to do it, is to define a new ImageProps that is an intersection between ImageSource and ImageMetadata with the & operator:
type ImageProps = ImageSource & ImageMetadata

The order of the types when declaring an intersection doesn’t matter, so this will also work:
type ImageProps = ImageMetadata & ImageSource



Type Intersection