#How do I define Astro Images in typescript without build errors?

11 messages · Page 1 of 1 (latest)

wooden raven
#

How do I define Astro Images in typescript without build errors?

--- 
import Vertice from "../svg/brand-vertice.astro";
import { Image } from 'astro:assets';

interface Props {
  url: string;
  title: string;
  teaserText: string;
  image?: Image;
  
}

const {
  url,
  title,
  teaserText,
  image
} = Astro.props;
---

this throws the error:

error ts(2322): Type '{ height: number; width: number; src: string; format: "avif" | "png" | "webp" | "jpeg" | "jpg" | "svg" | "tiff" | "gif"; }' is not assignable to type '(_props: Props) => any'.
  Type '{ height: number; width: number; src: string; format: "avif" | "png" | "webp" | "jpeg" | "jpg" | "svg" | "tiff" | "gif"; }' provides no match for the signature '(_props: Props): any'.

The bot gave me a suggestion, but that also throws up a different error....

Any ideas?

topaz summit
#

import type { ImageMetadata } from 'astro';

wooden raven
#

@topaz summit - when I tried that I got the following error:

error ts(2305): Module '"astro:assets"' has no exported member 'ImageMetadata'.
topaz summit
#

That's not what you tried

#

It's an import from astro, not astro:assets

wooden raven
#

Ah ok. Let me try that. Thanks.

#

I have tried this as follows:

---
import Vertice from "../svg/brand-vertice.astro";
import { Image } from 'astro:assets';
import type { ImageMetadata } from 'astro';

interface Props {
  url: string;
  title: string;
  teaserText: string;
  image?: ImageMetadata;
}

const {
  url,
  title,
  teaserText,
  image
} = Astro.props;
---

But getting this error:

error ts(2322): Type 'ImageMetadata | undefined' is not assignable to type 'string | ImageMetadata | Promise<{ default: ImageMetadata; }>'. Type 'undefined' is not assignable to type 'string | ImageMetadata | Promise<{ default: ImageMetadata; }>'.

topaz summit
#

because your image is optional, you need to guard it before passing it

#

What the type are telling you is that you could be doing <Image src={undefined} /> currently

wooden raven
#

That makes sense. Thanks.
I will provide a fallback image.

#

Ok so if I provide a fallback image, I can presumably use that and set typeof instead?
Or is it still best to explicitly use ImageMetadata

E.G.

---
import Vertice from "../svg/brand-vertice.astro";
import { Image } from 'astro:assets';
import Image1 from '@images/fallback-01.jpg';

interface Props {
  url: string;
  title: string;
  teaserText: string;
  image?: typeof Image1;
}

const {
  url,
  title,
  teaserText,
  image = Image1
} = Astro.props;
---

vs

---
import Vertice from "../svg/brand-vertice.astro";
import { Image } from 'astro:assets';
import type { ImageMetadata } from 'astro';
import Image1 from '@images/fallback-01.jpg';

interface Props {
  url: string;
  title: string;
  teaserText: string;
  image?: ImageMetadata;
}

const {
  url,
  title,
  teaserText,
  image = Image1
} = Astro.props;
---