如何为对象解构的属性添加泛型？解决TypeScript类型警告

问题分析 #

你这段代码的核心问题有两个：

1. useSelector 返回的 s.currentUser.info 可能是 undefined/空对象，但你用了 || '' 兜底成字符串，字符串无法解构出 userName 属性，TypeScript 因此报错类型不匹配。
2. 手动添加的类型注解 { userName: string } 强制要求必须存在该属性，但实际返回值可能不满足这个约束。

解决方案 #

方案1：空值合并+默认对象兜底（推荐） #

替换 || '' 为 ?? {}（空值合并运算符，仅在左侧为 null/undefined 时生效），同时给兜底对象设置默认值，保证类型匹配：

const { userName = '' } = useSelector((s: ReduxType) => s.currentUser.info) ?? {};

方案2：显式指定useSelector泛型类型 #

利用 useSelector 本身的泛型能力，明确返回值类型，再处理空值：

// 先指定泛型，获取完整的userInfo或undefined
const userInfo = useSelector<ReduxType, userInfo | undefined>(s => s.currentUser.info);
// 可选链+空值合并处理空情况
const userName = userInfo?.userName ?? '';

方案3：非空断言（仅适用于业务上能保证info一定存在的场景） #

如果业务逻辑中currentUser.info永远不会是null/undefined，可以添加非空断言（注意：滥用会隐藏潜在bug）：

const { userName } = useSelector((s: ReduxType) => s.currentUser.info)!;

为什么不推荐用any #

用 any 确实能消除警告，但会完全丢失 TypeScript 的类型检查能力，后续如果 userInfo 结构变动，代码不会收到任何提示，容易引发运行时错误。

内容的提问来源于stack exchange，提问作者Kiran D Patkar