介绍

泛型就是为了定义可重用的数据类型，它为我们提供了便利，减少了错误的发生。本文通过Vite创建的项目，配套VSCode+Volar插件进行的项目开发，享受了typescript的真香定律，也和大家分享一个泛型在Vue3实际开发中的一个例子。

功能介绍

在做低代码项目开发时常需要为组件提供一系列props，这些props属性众多，格式并不符合vue props要求，我们的任务是将这些不符合要求的格式转换成符合要求的格式，提供给vue props使用，并且可以提供属性提示。

转换之前的数据：

期望转换后的数据格式（转换后的数据格式就是标准的props格式）：

我们使用lodash的mapValues来写我们的转换函数，使用方式如下：

转换函数：

转换函数的实际效果

我们在vue单文件组件中使用了对应的转换函数，defaultProps为转换后的数据，我们通过对象展开符应用到了props中，然后我们在setup里面仅能看到props只有一个属性提示tag。在编辑器中，我们查看props的类型如下：

可以看到对应类型并没有defaultProps的对应信息。

当我们期望一个函数的处理结果有对应的类型的时候，这时候就应该使用泛型。改造如下：

我们加入了泛型T并期望T至少都满足{[key:string]:any}的格式（mapValues第一个参数的类型），然后我们回到组件中：

可以看到props有了对应的属性提示。编辑器中查看props可以看到对应的类型信息：

以上就是泛型在实际工作中的一个应用例子，我们通过泛型为转换函数提供了类型，使得props可以有更智能的提示信息，减少了代码编写的错误，泛型的应用还有很多场景，希望大家可以多多分享。