TS Error | Astro Lounge | Page 1

bronze otter Nov 29, 2025, 1:38 AM

#

Why am I getting a TS error in the following code

Heading.astro

// Heading.astro
const sizes = {
h1: "h1",
h2: "h2",
h3: "h3",
h4: "h4",
h5: "h5",
h6: "h6",
} as const;

interface Props {
tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
size: keyof typeof sizes;
title: string;
}

const { tag, size, title, ...rest } = Astro.props as Props;
const CustomTag = tag as any;

<CustomTag class={sizes[size]} {...rest}>
{title}
</CustomTag>

ContentBlock.astro

import SingleLineDeco from "@/assets/patterns/pattern-divide.svg";

interface Props {
title: string;
text: string;
class?: string;
}

const { title, text, class: className } = Astro.props;

FeatureCard.astro

interface Props extends CustomPictureProps {
title: string;
text: string;
headingTag: string;
headingSize: string;
class?: string;
}

const {
headingTag,
headingSize,
title,
text,
mobileURL,
tabletURL,
desktopURL,
class: className,
} = Astro.props;

Features.astro
<FeatureCard
desktopURL={LandscapeDesktopImg}
tabletURL={LandscapeTabletImg}
mobileURL={LandscapeMobileImg}
alt=""
headingTag="h3"
headingSize="h3"
title="Enjoyable place for all the family"
text="Our relaxed surroundings make dining with us a great experience for everyone. We can even arrange a tour of the farm before your meal."
/>

error: Type 'string' is not assignable to type '"h1" | "h2" | "h3" | "h4" | "h5" | "h6"'.

sage deltaBOT Nov 29, 2025, 1:38 AM

#

Hi @bronze otter. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The TypeScript error

Type 'string' is not assignable to type '"h1" | "h2" | "h3" | "h4" | "h5" | "h6"'.

is caused by a type mismatch between the props expected by your Heading.astro component and the values being passed from FeatureCard.astro.

Why this happens:

In Heading.astro, the tag and size props are strictly typed as "h1" | "h2" | "h3" | "h4" | "h5" | "h6" and keyof typeof sizes (which is also "h1" | "h2" | "h3" | "h4" | "h5" | "h6").
In FeatureCard.astro, the headingTag and headingSize props are typed as string, not as the specific union type.
When you pass headingTag and headingSize to Heading, TypeScript cannot guarantee that these are valid values (e.g., someone could pass "foo"), so it throws an error.

How to fix:

You need to type headingTag and headingSize in FeatureCard.astro as the same union type expected by Heading.astro:

interface Props extends CustomPictureProps {
  title: string;
  text: string;
  headingTag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
  headingSize: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
  class?: string;
}

This ensures that only valid heading tags and sizes can be passed, resolving the type error.

Reference:
This pattern of typing component props is described in the Astro documentation, which shows how to use TypeScript interfaces to strictly type props and ensure type safety when passing them between components. If the types do not match, TypeScript will throw an error, as you are seeing in your code Component Props.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@bronze otter Kapa.ai is still learning and improving, please let me know how I did by reacting below.

bronze otter Nov 29, 2025, 5:53 AM

#

@sage delta Can you explain why im getting a ts error please

import type { HTMLAttributes } from "astro/types";

const sizes = {
h1: "h1",
h2: "h2",
h3: "h3",
h4: "h4",
h5: "h5",
h6: "h6",
} as const;

interface Props extends HTMLHeadingElement {
tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
size: keyof typeof sizes;
title: string;
}

const { tag, size, title, ...rest } = Astro.props as Props;
const CustomTag = tag as any;

<CustomTag class={sizes[size]} {...rest}>
{title}
</CustomTag>

<Heading
  slot="heading"
  title="A few highlights from our menu"
  tag="h2"
  size="h2"
  id="menu-title"
/>

error: Type '{ slot: string; title: string; tag: "h2" | "h1" | "h3" | "h4" | "h5" | "h6"; size: "h2" | "h1" | "h3" | "h4" | "h5" | "h6"; }' is not assignable to type 'IntrinsicAttributes & Props'.
Type '{ slot: string; title: string; tag: "h2" | "h1" | "h3" | "h4" | "h5" | "h6"; size: "h2" | "h1" | "h3" | "h4" | "h5" | "h6"; }' is missing the following properties from type 'Props': align, addEventListener, removeEventListener, accessKey, and 313 more.

sage deltaBOT Nov 29, 2025, 5:53 AM

#

Let me check the knowledge base for you again. One moment! :books:

#

The TypeScript error you are seeing:

Type '{ slot: string; title: string; tag: "h2" | "h1" | "h3" | "h4" | "h5" | "h6"; size: "h2" | "h1" | "h3" | "h4" | "h5" | "h6"; }' is not assignable to type 'IntrinsicAttributes & Props'.
  Type '{ slot: string; title: string; tag: "h2" | "h1" | "h3" | "h4" | "h5" | "h6"; size: "h2" | "h1" | "h3" | "h4" | "h5" | "h6"; }' is missing the following properties from type 'Props': align, addEventListener, removeEventListener, accessKey, and 313 more.

is caused by this line in your code:

interface Props extends HTMLHeadingElement {
  tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
  size: keyof typeof sizes;
  title: string;
}

You are extending HTMLHeadingElement, which is a DOM interface representing an actual HTML element instance, not the set of valid HTML attributes. This causes TypeScript to expect all the properties and methods of a real DOM element (like addEventListener, align, etc.) to be present in your props, which is not what you want for component props.

How to fix:

You should use Astro's HTMLAttributes<"h1"> type for props that represent HTML attributes, not the DOM element interface. For example:

import type { HTMLAttributes } from "astro/types";

interface Props extends HTMLAttributes<"h1"> {
  tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
  size: keyof typeof sizes;
  title: string;
}

This way, your component props will correctly accept valid HTML attributes for heading elements, and you won't get the error about missing DOM properties. This approach is described in the Astro documentation for built-in HTML attributes.

#

Summary:

Do not extend HTMLHeadingElement in your props interface.
Use HTMLAttributes<"h1"> from astro/types to type HTML attributes for your component props.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@bronze otter Kapa.ai is still learning and improving, please let me know how I did by reacting below.

bronze otter Nov 29, 2025, 6:11 AM

#

@sage delta Another TS problem sir

export type CustomPictureProps = {
mobileURL: string | ImageMetadata;
tabletURL?: string | ImageMetadata | null;
desktopURL: string | ImageMetadata;
alt: string;
class?: string;
};

const tabletImg = await getImage({
src: tabletURL,
format: "avif",
priority: true,
});

Type 'string | ImageMetadata | null | undefined' is not assignable to type 'string | ImageMetadata | Promise<{ default: ImageMetadata; }>'.
Type 'undefined' is not assignable to type 'string | ImageMetadata | Promise<{ default: ImageMetadata; }>'.

sage deltaBOT Nov 29, 2025, 6:11 AM

#

Let me check the knowledge base for you again. One moment! :books:

#

The TypeScript error:

Type 'string | ImageMetadata | null | undefined' is not assignable to type 'string | ImageMetadata | Promise<{ default: ImageMetadata; }>'.
  Type 'undefined' is not assignable to type 'string | ImageMetadata | Promise<{ default: ImageMetadata; }>'.

is caused because the src property you are passing to getImage() can be undefined or null, but getImage() expects only a string, ImageMetadata, or a dynamic import Promise.

From your type:

tabletURL?: string | ImageMetadata | null;

This means tabletURL can be undefined (because of the ?) or null, but getImage() does not accept undefined or null for its src parameter. The Astro documentation specifies that src must be a valid image source, not undefined or null.

How to fix:

You need to check that tabletURL is defined and not null before calling getImage():

let tabletImg;
if (tabletURL) {
  tabletImg = await getImage({
    src: tabletURL,
    format: "avif",
    priority: true,
  });
}

This ensures you only call getImage() with a valid value, matching the expected types and avoiding the TypeScript error.

Reference:
The error and the required types for `src` are described in the Astro documentation for the `<Image />` component and `getImage()` function, which both require a valid image source and do not accept `undefined` or `null` as valid values Image properties.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@bronze otter Kapa.ai is still learning and improving, please let me know how I did by reacting below.

bronze otter Nov 29, 2025, 6:13 AM

#

@sage delta Is there a better way to handle this problem, or the if statement is the easiest?

sage deltaBOT Nov 29, 2025, 6:13 AM

#

Let me check the knowledge base for you again. One moment! :books:

#

Based on the provided Astro documentation, the recommended and most straightforward way to handle optional image sources (like tabletURL which may be undefined or null) is to use an if statement to check for a valid value before calling getImage(). The documentation does not mention any built-in alternative or more concise pattern for this scenario. The src parameter for getImage() must be a valid image source and cannot be undefined or null—passing such values will result in a TypeScript error or runtime issue Image properties.

So, the `if` statement is the recommended and easiest approach according to the official Astro documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@bronze otter Kapa.ai is still learning and improving, please let me know how I did by reacting below.

bronze otter Nov 29, 2025, 6:18 AM

#

Im getting no an error inside my picture tag. My commented out code is my attempt to resolve it

Error: 'tabletImg' is possibly 'undefined'.
@sage delta

sage deltaBOT Nov 29, 2025, 6:18 AM

#

Let me check the knowledge base for you again. One moment! :books:

#

The error 'tabletImg' is possibly 'undefined' occurs because TypeScript detects that tabletImg might not be defined (for example, if tabletURL was undefined or null and you conditionally skipped calling getImage). This is a common TypeScript safety check when dealing with optional values.

How to resolve this:

You should conditionally render the <source> element for tabletImg only if it is defined. Astro supports conditional rendering using JavaScript expressions in the template, similar to JSX:

<picture class:list={className}>
  <source media="(min-width: 1000px)" srcset={desktopImg.src} />
  {tabletImg && <source media="(min-width: 768px)" srcset={tabletImg.src} />}
  <img src={mobileImg.src} alt={alt} {...mobileImg.attributes} />
</picture>

This pattern is supported in Astro templates, as described in the documentation on conditionally rendering elements and JSX-like expressions.

Summary:
Use `{tabletImg && <source ... />}` to only render the `<source>` tag if `tabletImg` is defined. This will resolve the TypeScript error and is the recommended approach in Astro.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@bronze otter Kapa.ai is still learning and improving, please let me know how I did by reacting below.

bronze otter Nov 29, 2025, 6:19 AM

#

@sage delta can you explain why my if statement didnt work and conditional rendering does

sage deltaBOT Nov 29, 2025, 6:19 AM

#

Let me check the knowledge base for you again. One moment! :books:

#

Your if statement did not work inside the Astro component template because Astro’s template syntax (like JSX) does not support traditional JavaScript control flow statements (such as if, for, etc.) directly in the HTML/template section. Instead, Astro supports conditional rendering using JavaScript expressions inside curly braces, such as {condition && <Element />}.

For example, this works:

{tabletImg && <source media="(min-width: 768px)" srcset={tabletImg.src} />}

But this does not work:

<!-- This is invalid in Astro templates -->
{
  if (tabletImg) {
    <source media="(min-width: 768px)" srcset={tabletImg.src} />
  }
}

This is because, as described in the Astro documentation, you can use JavaScript expressions (including logical operators and ternary expressions) inside curly braces in the template, but not full statements like if or for loops. All traditional JavaScript logic must be placed in the frontmatter (the code fence at the top), while the template only allows expressions for dynamic rendering Write JavaScript expressions in Astro Conditionally render elements JSX-like Expressions.

In summary:

Use {condition && <Element />} for conditional rendering in the template.
Traditional if statements are not valid in the template section; they only work in the frontmatter script.

#TS Error

Heading.astro

const { tag, size, title, ...rest } = Astro.props as Props; const CustomTag = tag as any;

ContentBlock.astro

const { title, text, class: className } = Astro.props;

const { headingTag, headingSize, title, text, mobileURL, tabletURL, desktopURL, class: className, } = Astro.props;

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

const { tag, size, title, ...rest } = Astro.props as Props; const CustomTag = tag as any;

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Reference: The error and the required types for src are described in the Astro documentation for the <Image /> component and getImage() function, which both require a valid image source and do not accept undefined or null as valid values Image properties.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

So, the if statement is the recommended and easiest approach according to the official Astro documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Summary: Use {tabletImg && <source ... />} to only render the <source> tag if tabletImg is defined. This will resolve the TypeScript error and is the recommended approach in Astro.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

const { tag, size, title, ...rest } = Astro.props as Props;
const CustomTag = tag as any;

const {
headingTag,
headingSize,
title,
text,
mobileURL,
tabletURL,
desktopURL,
class: className,
} = Astro.props;

const { tag, size, title, ...rest } = Astro.props as Props;
const CustomTag = tag as any;

Reference:
The error and the required types for `src` are described in the Astro documentation for the `<Image />` component and `getImage()` function, which both require a valid image source and do not accept `undefined` or `null` as valid values Image properties.

So, the `if` statement is the recommended and easiest approach according to the official Astro documentation.

Summary:
Use `{tabletImg && <source ... />}` to only render the `<source>` tag if `tabletImg` is defined. This will resolve the TypeScript error and is the recommended approach in Astro.