关于 interface 和 type 定义 useParams 参数类型的困惑
来源：7-5 【路由架构】基础路由及页面导航
起点丶
2024-04-28
查看 useParams 定义可以看出，传入的参数类型并不单单是 string 类型，而是 <ParamsOrKey extends string | Record<string, string | undefined> ,有这样的一个泛型约束，表明其参数不仅仅可以是 string ，也可以是 Record 构建的一个对象类型，如果使用 interface 定义这个对象类型，理论上应该是没问题的，因为 type 和 interface 虽然有区别，但此处定义对象类型是应该是等价的，这两种方式定义 MatchParams 它都是对象类型，复合 Record<string, string | undefined> 这个泛型约束才对。实在是有些困惑，望老师解答
1回答
-
阿莱克斯刘
2024-07-18
你的疑惑很正常，让我详细解释一下 useParams 的类型约束以及为什么使用 type 而不是 interface。
首先，让我们回顾一下 useParams 的作用：它是 React Router 提供的一个钩子函数，用于获取当前路由中的参数值。这些参数通常是从 URL 中提取的动态部分，例如路径中的占位符。
在 React Router 中，useParams 返回一个对象，其中包含了当前 URL 中匹配的动态参数的键值对。这些参数可以是字符串，也可以是对象。具体来说，useParams 的类型定义如下：
type ParamsOrKey = string | Record<string, string | undefined>;
declare function useParams<Params extends ParamsOrKey = string>(): Params;现在我们来解释一下这个类型定义：
ParamsOrKey是一个联合类型，可以是字符串或一个键为字符串、值为字符串或undefined的对象。这意味着useParams可以返回一个字符串，也可以返回一个对象。Params是一个泛型参数，它默认为ParamsOrKey，即可以是字符串，也可以是对象。你可以根据需要传入其他类型，但通常我们不需要显式指定这个泛型参数。使用
type而不是interface的原因是，type具有更强大的能力，可以进行联合类型、交叉类型、映射类型等高级操作。而interface更适合用于描述对象的形状。在这里，我们需要联合类型，因此使用type更合适。
总结一下，虽然
type和interface都可以用来定义对象类型，但在这种情况下，使用type更适合，因为它允许我们更灵活地定义联合类型。希望这能解答你的疑惑！如果还有其他问题，欢迎继续提问。
00
相似问题