#Strong typing on Astro.params

7 messages · Page 1 of 1 (latest)

gloomy condor
#

Is there a way to strongly type astro.params? Is everything a string?

burnt glacierBOT
#

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

#

Yes, you can strongly type Astro.params in Astro, especially when using TypeScript. By default, the values in Astro.params are strings (or undefined for rest parameters), since route parameters are encoded in the URL and only strings (or numbers, which are converted to strings) are supported as values. For example:

---export async function getStaticPaths() {
  return [
    { params: { id: '1' } }, // id is a string
    { params: { id: '2' } },
    { params: { id: '3' } }
  ];
}
const { id } = Astro.params; // id is a string
---

Astro render context: params

For TypeScript users, Astro provides utility types to infer the types of Astro.params based on your getStaticPaths() function. You can use InferGetStaticParamsType to get a strongly-typed version of your params:

import type { InferGetStaticParamsType } from "astro";

export const getStaticPaths = (async () => {
  // ...
}) satisfies GetStaticPaths;

type Params = InferGetStaticParamsType<typeof getStaticPaths>;
const { id } = Astro.params as Params; // id is strongly typed

Infer getStaticPaths types

In summary:

  • All values in Astro.params are strings (or undefined for rest parameters).
  • You can use Astro’s TypeScript utilities to strongly type Astro.params for better type safety in your components and pages.

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

#

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

gloomy condor
#

I'm using SSR though. Does this change anything @burnt glacier

burnt glacierBOT
#

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

#

When using SSR (on-demand rendering) in Astro, the typing of Astro.params does not fundamentally change: all values in Astro.params are still strings (or undefined for rest parameters), since they are derived from the URL path segments. This is consistent with both static and SSR modes.

However, in SSR mode, you do not use getStaticPaths(), so you cannot leverage Astro’s TypeScript utilities like InferGetStaticParamsType to infer types from getStaticPaths(). You will need to manually type your params if you want strong typing in your code. For example:

interface Params {
  id: string;
}

const { id } = Astro.params as Params;

The documentation confirms that in SSR mode, params are available for any matching route, and are always strings (or undefined for rest parameters) because they come from the URL path. There is no mention of automatic type inference for SSR params, so manual typing is recommended if you want type safety in your code On-demand dynamic routes Astro render context: params.

Summary:

  • In SSR, Astro.params values are still strings (or undefined for rest parameters).
  • You must manually type Astro.params in SSR mode for strong typing, as there is no automatic inference from getStaticPaths() in this mode.

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