前言
这是element组件库系列文章，主要是平时使用element组件库的一些过程和心得，文章篇幅不定，有长有短，但主打一个实用（可能实用不一定是对你实用，不实用请轻喷）。废话少说，本篇将讲述我是如何使用typescript捕获到组件的props类型定义并封装的。
| package | version |
|---|---|
| element-plus | 2.2.15 |
| Vue3 | 3.3.4 |
前置知识
阅读本文，你可能需要先了解以下typescript类型的两个知识点：
在此简要说明，ts中的typeof和js的typeof还是有着一些区别的，js中typeof只能识别基本类型而已，对于Array、Date两个只知道是对象，不知道是哪两个中的哪一个；而ts中的typeof完全可以精确识别出 Date和Array的类型。Parameters获取的是函数参数所有类型定义，返回一个参数的类型列表（也叫元组tuple）。
正文开始
1.需求来源说明
我在封装组件一个通用的列表组件时，内部使用了element-plus的table组件，希望传递table-column的json配置(props和一个自定义实现的customRender函数)，期望我配置这个json结构时我能有良好的类型提示。本想直接把组件的props倒出来，但我发现element-plus并没有直接给我提供可以像ant-design-vue导出的props定义。
2.分析问题
但是组件可以导出的，难道加个typeof？但是ElTableColumn是组件，typeof返回的是其组件的定义，并不是Props的类型定义。好的，点进去直接copy这里的定义不就好了？（你觉得真的好吗？）
真的有点头疼，于是我真的又开始研究typeof返回的值了，于是我看到了组件类型定义中有个setup属性，我们知道setup是个函数，其第一个参数是props。等等，props的类型不就是我们需要的吗，让我们看看取setup看看编辑器会有什么提示。
我们确实可以在setup定义中找到期待的props的定义，圈起来的一部分确实是平时使用el-table-column会提示的属性，问题来了，我们如何捕获这里的定义，把它拿出来使用呢？
3.捕获类型
由于setup是一个函数，props相当于是它的某个参数，我们要做的事捕获函数类型定义中的参数定义，正好，ts提供了一个Parameters类型定义用来干这事。其在【前置知识】部分已经介绍，不再赘述。
于是，可以看到：
不是说好返回的是一个元组吗，咋是一个联合类型呢？而且我传给Parameters的setup的类型定义在报错哎，头秃，关机下班！
再看看我们提取的setup，这次仔细地把它的身子舔一遍，不是，把它的提示代码从头到尾看一遍。又发现了，小老弟，你咋又是个联合类型呢？好像vue3在支持composition API的同时保留了options API，options API没有了setup，所以整个组件定义中它并非是个函数，只是在composition API写法中是个函数（有点不确定，欢迎指正）。
于是，回到上一步，我们提取setup的时候有没有办法只提取联合类型的某个部分呢？还真有，强大的ts早就考虑好了，使用Exclude。其作用就是字面意思排除，具体用法参考【前置知识】。
于是，正确地提取setup类型是这样的：
这才是我们喜欢的小老弟嘛，上个小老弟太坏了，害我秃头。
于是继续，提取出的参数类型如下：
终于是一个好元组了，扫视一眼，第一个是props的定义，第二个值是setup的上下文对象SetupContext。虽然长，但是名字一眼洞穿，只是编辑器提示一大串吓懵了而已。
我们需要的是第一个类型定义，所以让我们连起来一步到位吧：
这一行代码写出来可真是不容易啊，加上我的业务customRender定义，终于得到了：
type ResultListTableColumn=
(Parameters<Exclude<(typeof ElTableColumn)['setup'],undefined>>[0]) & { customRender:(...args:any[])=>VNode };
大功告成，完结散花，这下真的可以关机下班了！让我们下篇再见！
