Enhance your Astro development experience with rigorous type safety for every route in your application. This integration automatically generates TypeScript definitions from your project's route structure.
Documentation โข npm โข GitHub
- ๐ Typesafe: Ensures all URLs matches a route in your Astro project.
- ๐ Typed Link Component: Replace your anchor links with the typesafe
Link
component. - ๐ Typesafe Search Params: Support for typesafe and JSON serialized search params when using a SSR adapter.
- ๐ ๏ธ Automatic Type Generation: Simple installation as an Astro integration.
- ๐งฉ Custom Component Support: Add type safety to custom links with the types
Route
andRouteOptions
.
Compatible with Astro version 4 and 5, with a minimum of 4.14.0
.
- Add integration:
npx astro add astro-typesafe-routes
- Start the Astro development server if it's not already running to run type generation:
npm run dev
- Install package:
npm install astro-typesafe-routes
- Add integration to
astro.config.mjs
:
import { defineConfig } from 'astro/config';
import astroTypesafeRoutes from "astro-typesafe-routes"
export default defineConfig({
integrations: [
astroTypesafeRoutes()
]
});
- Start the Astro development server if it's not already running to run code generation:
npm run dev
Import the Link component and enjoy typesafe urls.
---
import Link from "astro-typesafe-routes/link";
---
<Link to="/blog/[id]" params={{ id: "4" }}>Blog post</Link>
For more in-depth information and detailed usage instructions, please refer to the documentation.