inertia-rails-typescript
Configure type-safe shared props, flash messages, and error handling across Inertia Rails with React, Vue, or Svelte using InertiaConfig module augmentation. Define your shared data types once in globals.d.ts and index.ts, then access them globally via usePage() with full TypeScript support. Avoid common pitfalls like interface vs. type constraints and incorrect destructuring patterns.
inertia-rails-typescript sets up TypeScript type safety for Inertia Rails shared props, flash, and errors across React, Vue, and Svelte.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-02-13
inertia-rails-typescript sets up TypeScript type safety for Inertia Rails shared props, flash, and errors across React, Vue, and Svelte. Configure type-safe shared props, flash messages, and error handling across Inertia Rails with React, Vue, or Svelte using InertiaConfig module augmentation. Define your shared data types once in globals.d.ts and index.ts, then access them globally via usePage() with full TypeScript support. Avoid common pitfalls like interface vs. type constraints and incorrect destructuring patterns.
Use it when
- inertia-rails-typescript helps you type your shared props—data passed from Rails controllers to all Inertia pages.
- inertia-rails-typescript resolves TS2344 by properly configuring InertiaConfig module augmentation in globals.d.ts.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
inertia-rails/skills/inertia-rails-typescript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to set up typescript with inertia rails?
inertia-rails-typescript guides you through configuring type-safe shared props and flash messages. Start by creating a globals.d.ts file that augments the InertiaConfig module with your SharedProps interface and flash data types. Define your shared data structure once, then access it globally via usePage() in React, Vue, or Svelte components with full TypeScript support and zero TS2344 errors.
What is inertia shared props typescript and how do I use it?
inertia-rails-typescript helps you type your shared props—data passed from Rails controllers to all Inertia pages. In globals.d.ts, define a SharedProps interface listing all shared data keys (auth, flash, errors, etc.). Then in your components, usePage<SharedProps>() gives you typed access to props.auth, props.flash, and custom shared data without TS2339 errors about missing properties.
How do I fix TS2344 inertia usePage errors?
inertia-rails-typescript resolves TS2344 by properly configuring InertiaConfig module augmentation in globals.d.ts. Ensure your SharedProps interface is correctly exported and merged into the InertiaConfig namespace. Use usePage<SharedProps>() with the correct generic type, and verify that all shared data keys in your Rails middleware match your interface definition exactly.
What should I put in inertia rails globals.d.ts setup?
inertia-rails-typescript recommends defining your SharedProps interface and flash data types in globals.d.ts, then augmenting the InertiaConfig module to recognize them. Include keys like auth, flash, errors, and any custom shared data. This single source of truth ensures every component accessing usePage() gets consistent, type-checked props without repeating type definitions across your codebase.
How do I type page-specific props correctly in React, Vue, or Svelte?
inertia-rails-typescript separates shared props (typed globally via InertiaConfig) from page-specific props (typed per component). Use usePage<SharedProps>() for shared data, then define a PageProps interface for page-specific data. In React, extend your component props with PageProps; in Vue/Svelte, define a local Props type. This layered approach keeps types maintainable and prevents prop collision.
What are inertia typescript best practices for shared data?
inertia-rails-typescript emphasizes defining shared data types once in globals.d.ts and index.ts, then reusing them everywhere. Use interface (not type) for InertiaConfig augmentation to allow merging. Keep SharedProps flat and focused on truly global data. Avoid incorrect destructuring patterns and ensure Rails middleware keys match your TypeScript interface exactly to prevent runtime mismatches.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Inertia Rails TypeScript Setup
Type-safe shared props, flash, and errors using InertiaConfig module augmentation.
Works identically across React, Vue, and Svelte — the globals.d.ts and InertiaConfig setup is the same for all frameworks.
Before adding TypeScript types, ask:
- Shared props (auth, flash)? → Update SharedProps/FlashData in index.ts — InertiaConfig in globals.d.ts propagates them globally via usePage()
- Page-specific props? → type Props = { ... } in the page file only — never include shared props here
InertiaConfig Module Augmentation
Define shared props type ONCE globally — never in individual page components.
InertiaConfig property names are EXACT — do not rename them:
- sharedPageProps (NOT sharedProps)
- flashDataType (NOT flashProps, NOT flashData)
-
(truncated - see the full file via the links below)
File tree — 1 file
skills/inertia-rails-typescript/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Set up TypeScript type safety for Inertia Rails shared props and flash”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Inertia Rails Pages provides patterns for constructing pages that maintain layout state across navigation, derive UI from URL parameters server-side, and use client-side router methods to update props without full reloads. It covers persistent layouts, prefetching, partial data refresh, and deferred component rendering across React, Vue, and Svelte.
Inertia Rails Setup detects your frontend framework (React, Vue, or Svelte) and serialization layer from your project files, then recommends and installs complementary libraries like alba-inertia, js-routes, pagy, and shadcn components. It generates a CLAUDE.md configuration block that tells Claude which skill patterns apply to your specific stack.
Alba-Inertia pairs Alba serializers with Typelizer to generate TypeScript types automatically from your Rails models and resources. Define entity, page, and shared props resources once, then render them convention-based in controllers—no manual type declarations needed.
This skill shows how to wire shadcn-vue UI components into Inertia Rails Vue 3 applications, replacing Nuxt-specific patterns with Inertia equivalents. Learn to bind form inputs via name attributes, manage dialogs with router state, render server-sorted tables, and display flash toasts—plus avoid common pitfalls like v-model conflicts and frozen computed values.
Master the server-driven mental model behind Inertia Rails: the server owns routing, data, and auth while React renders UI only. This skill routes you to the right pattern for pages, forms, navigation, and data refresh through a decision matrix covering data sources, state ownership, and common anti-patterns to avoid.
Inertia Coder guides you through building modern single-page applications that combine Inertia.js with Rails and your choice of React, Vue, or Svelte. It covers controller setup, page component patterns, form handling with the useForm hook, shared data management, and client-side routing—all without the complexity of separate APIs.
More skills inertia-rails-controllers (MIT) · shadcn-inertia (MIT) · inertia-rails-testing (MIT) · laravel-inertia-react (MIT) · shadcn-svelte-inertia (MIT) · inertia-rails-forms (MIT)