# Inertia Rails TypeScript 设置使用 InertiaConfig 模块增强的类型安全共享 props、flash 和错误。在 React、Vue 和 Svelte 中工作方式相同 — 所有框架的“globals.d.ts”和“InertiaConfig”设置都是相同的。 **在添加 TypeScript 类型之前，询问：** * **共享道具（auth、flash）？** → 更新 `index.ts` 中的 `SharedProps`/`FlashData` — `globals.d.ts` 中的 InertiaConfig 通过 `usePage()` 将它们传播到全局 * **特定于页面的 props？** → 仅在页面文件中输入 `type Props = { ... }` - 切勿在此处包含共享 props ## InertiaConfig 模块增强在全局范围内定义共享属性类型一次 - 切勿在单个页面组件中定义。 InertiaConfig 属性名称是精确的 — 不要重命名它们： * `sharedPageProps` （不是sharedProps） * `flashDataType`（不是 flashProps，不是 flashData） * `errorValueType` （不是 errorBag，不是 errorType） // 应用程序/前端/类型/globals.d.ts 从 '@/types' 导入类型 { FlashData, SharedProps } 声明模块'@inertiajs/core'{ 导出接口 InertiaConfig { SharedPageProps: SharedProps // 精确名称 — 自动输入 usePage().props flashDataType: FlashData // 确切名称 — 自动键入 usePage().flash errorValueType: string[] // 确切名称 — 错误是字符串数组 } } // 应用程序/前端/类型/index.ts 导出接口FlashData { 注意？：字符串警报？：字符串 } 导出接口 SharedProps { auth: { 用户?: { id: 号码;名称：字符串；电子邮件：字符串 } } } **约定：** 使用 `auth: { user: ... }` 作为共享 props 键 — 这与 Rails `inertia_share` 社区约定 (`{ auth: { user: current_user } }`) 匹配。 “auth”命名空间将身份验证数据与页面属性分开，防止页面拥有自己的“user”属性时发生冲突。不要使用“current_user:”或“user:”作为顶级键——它们与特定于页面的 props 发生冲突，并打破了其他 Inertia 技能和示例所假定的约定。 ## 坏模式与好模式 // 不好——将共享属性作为泛型传递： // usePage<{ users: User[], auth: AuthData, flash: FlashData }>() // 不好——将 SharedProps 接口扩展到页面 props 中： // 接口 Props 扩展 SharedData { users: User[] } // 不好——声明 PageProps 接口： // 接口 PageProps { auth: AuthData;闪存：FlashData } // 不好 — 使用 current_user 或 user 作为顶级共享密钥： // 接口 SharedProps { current_user: 用户 } // 不好 — 直接从 usePage() 解构 auth （TS2339：页面上不存在“auth”）： // const { auth } = usePage() // usePage() 返回一个带有 { props, flash, component, url, ... } 的 Page 对象 // auth 存在于 props 内部，而不是页面本身 // 不好——在index.ts中复制InertiaConfig（它属于globals.d.ts）： // 在index.ts中声明模块 '@inertiajs/core' { ... } ← // 好 — 来自 usePage().props 的 props，来自 usePage().flash 的 flash： const { 道具, flash } = usePage() // props.auth 已输入（通过 InertiaConfig 来自 SharedProps） // flash.notice 已输入（通过 InertiaConfig 来自 FlashData） **重要提示：** `globals.d.ts` 配置 InertiaConfig 一次。添加新的共享属性时，仅更新“index.ts”——不要触及“globals.d.ts”： // 之前 — app/frontend/types/index.ts 导出接口 SharedProps { auth: { 用户?: { id: 号码;名称：字符串；电子邮件：字符串 } } } // 之后 — 在此处添加新密钥，而不是在 globals.d.ts 中导出接口 SharedProps { auth: { 用户?: { id: 号码;名称：字符串；电子邮件：字符串 } } 通知：{ 未读计数：数量 } } `globals.d.ts` 中的 InertiaConfig 按名称引用 `SharedProps` — 它会自动获取更改。添加第二个“声明模块‘@inertiajs/core’”会导致冲突。 ## 页面特定的道具页面组件仅输入自己的 props。共享 props（如 auth）和 flash 自动来自 InertiaConfig。 ### 页面属性的“type”与“interface”（特定于 React）此约束仅适用于 **React**。 Vue 的“defineProps()”和 Svelte 的“$props()”不使用“usePage()”泛型，因此“interface”在那里工作得很好。 `usePage()` 要求 `T` 有索引签名。 `type` 别名有一个隐式的； `interface` 声明没有。将“interface”与“usePage”一起使用会导致编译时出现 TS2344。图案|与 `usePage()` 一起使用吗？ |注释 ---|---|--- `type Props = { users: User[] }` |是的 |首选 - 有效 `interface Props { users: User[] }` | **否** — TS2344 |缺少索引签名 `usePage<必需>()` |是的 |包装接口以添加索引签名 // 反应类型道具= { users: User[] // 仅特定于页面 // auth 不在这里 — 它来自全局 InertiaConfig } 导出默认函数 Index({ users }: Props) { // 单独访问共享的 props: const { 道具, flash } = usePage() // props.auth 通过 InertiaConfig 输入 // flash.notice 通过 InertiaConfig 输入返回 } ### 访问 Vue 和 Svelte 中的共享 props Vue 和 Svelte 使用不同的模式来访问共享 props，但 InertiaConfig 类型的工作方式相同。 <脚本设置lang =“ts”> 从 '@inertiajs/vue3' 导入 { usePage } 从“vue”导入{计算} 常量页面 = usePage() const userName = Compute(() => page.props.auth.user?.name) // 通过 InertiaConfig 输入 <脚本语言=“ts”> 从“@inertiajs/svelte”导入{页面} // $page.props.auth 通过 InertiaConfig 输入 // $page.flash.notice 通过 InertiaConfig 输入 ## 常见 TypeScript 错误错误 |原因 |修复 ---|---|--- **TS2344** 关于 `usePage()` | `interface` 缺少索引签名 |使用“type Props = { ... }”代替“interface”，或换行：“usePage>()” **TS2339** `'auth' 在类型 Page 上不存在 |直接从 `usePage()` 解构 `auth` | `usePage()` 返回 `{ props, flash, ... }` — 使用 `usePage().props.auth`，而不是 `usePage().auth` **TS2339** `类型上不存在'flash' |访问 `usePage().props.flash` | Flash 是顶级的：`usePage().flash`，而不是`usePage().props.flash` 共享道具无类型 |缺少 InertiaConfig |添加具有模块增强功能的“globals.d.ts”（见上文） InertiaConfig 未生效 |错误文件中的声明 |必须位于“.d.ts”文件中（例如“globals.d.ts”），而不是“.ts”中 - TypeScript 会忽略具有导入/导出的常规“.ts”文件中的“声明模块” 类型正确但 IDE 显示错误 |不包括`globals.d.ts` |验证“tsconfig.app.json”包含“include”数组中的类型目录 ## Typelizer 集成如果使用 `typelizer` gem（请参阅 `alba-inertia` 技能），SharedProps 是从序列化器自动生成的 - 不要在 `index.ts` 中手动编写 `SharedProps` 接口。您只需编写一次“globals.d.ts”（InertiaConfig 增强）。当您向“SharedPropsResource”添加新属性时，Typelizer 会重新生成“index.ts”，并且类型通过 InertiaConfig 传播——无需手动更新类型。 ## 相关技能 * **共享道具设置** → `inertia-rails-controllers` (inertia_share) * **Flash 配置** → `inertia-rails-controllers` (flash_keys) * **自动生成的类型** → `alba-inertia` (Typelizer + Alba 资源) * **页面组件 props** → `inertia-rails-pages` （类型 Props 模式）

惯性轨道打字稿

包含技能