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
Install
inertia-rails/skills/inertia-rails-typescript
git clone https://github.com/inertia-rails/skills
cp -r skills/skills/inertia-rails-typescript ~/.claude/skills/inertia-rails-typescriptnpx skillfed install inertia-rails/skills/inertia-rails-typescriptFrequently 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)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/inertia-rails-typescript/SKILL.md