关于 interface 和 type 定义 useParams 参数类型的困惑

Question

查看 useParams 定义可以看出，传入的参数类型并不单单是 string 类型，而是 <ParamsOrKey extends string | Record<string, string | undefined> ,有这样的一个泛型约束，表明其参数不仅仅可以是 string ，也可以是 Record 构建的一个对象类型，如果使用 interface 定义这个对象类型，理论上应该是没问题的，因为 type 和 interface 虽然有区别，但此处定义对象类型是应该是等价的，这两种方式定义 MatchParams 它都是对象类型，复合 Record<string, string | undefined> 这个泛型约束才对。实在是有些困惑，望老师解答

Answer 1

阿莱克斯刘 2024-07-18 11:20:52

你的疑惑很正常，让我详细解释一下 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;

现在我们来解释一下这个类型定义：

1. ParamsOrKey 是一个联合类型，可以是字符串或一个键为字符串、值为字符串或 undefined 的对象。这意味着 useParams 可以返回一个字符串，也可以返回一个对象。

2. Params 是一个泛型参数，它默认为 ParamsOrKey，即可以是字符串，也可以是对象。你可以根据需要传入其他类型，但通常我们不需要显式指定这个泛型参数。

3. 使用 type 而不是 interface 的原因是，type 具有更强大的能力，可以进行联合类型、交叉类型、映射类型等高级操作。而 interface 更适合用于描述对象的形状。在这里，我们需要联合类型，因此使用 type 更合适。

总结一下，虽然 type 和 interface 都可以用来定义对象类型，但在这种情况下，使用 type 更适合，因为它允许我们更灵活地定义联合类型。

希望这能解答你的疑惑！如果还有其他问题，欢迎继续提问。