[feature request] can we consider extracting props for export

[pangao66]

Existing Component

Yes

Component Name

button

Description

有些业务场景 需要对组件进行二次封装, 比如 我想封装一个plus-button 这个组件继承el-button所有的属性, 然后自己又扩展一些属性, 我想给它继承el-button的所有的props 目前由于el-button的props是写在组件里面的没有对外暴露, 无法引用, 虽然目前也能用 v-bind=$attrs实现, 但是这个体验不太好, ts和ide无法推断相关属性 如果props文件能够对外暴露 则可以利用ts 继承 很容易推导出相关属性

[element-bot]

Translation of this issue:

Existing Component

Yes

Component Name

button

Description

Some business scenarios require secondary encapsulation of components. For example, I want to encapsulate a plus button. This component inherits all the attributes of El button and then extends some attributes. I want to inherit all the props of El button. At present, because the props of El button are written in the component and are not exposed to the outside world, it cannot be referenced, Although it can also be implemented with v-bind = $attrs at present, this experience is not very good. Ts and IDE cannot infer relevant attributes. If props files can be exposed to the outside world, relevant attributes can be easily deduced by TS inheritance

[zouyaoji]

+1.
我这边也遇到了类似需求，还发了邮件给 @sxzz 咨询，希望有时间能看一下呢。

[sxzz]

@zouyaoji @pangao66
Please consider the code below.

App.vue

<script lang="ts" setup>
import CustomButton from './CustomButton.vue'
</script>

<template>
  <custom-button text-color="red" size="large">Hello world</custom-button>
</template>

CustomButton.vue

<script lang="ts" setup>
import { buttonProps } from 'element-plus'

const props = defineProps({
  ...buttonProps,
  textColor: String,
})
</script>

<template>
  <el-button v-bind="props" :style="{ color: props.textColor }">
    <slot></slot>
  </el-button>
</template>

[zouyaoji]

收到，非常感谢

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "element-plus/element-plus" ***@***.***&gt;; 发送时间:&nbsp;2022年1月13日(星期四) 晚上11:09 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;Re: [element-plus/element-plus] [feature request] can we consider extracting props for export (#3107) @zouyaoji @pangao66 Please consider the code below. App.vue <script lang="ts" setup&gt; import CustomButton from './CustomButton.vue' </script&gt; <template&gt; <custom-button text-color="red" size="large"&gt;Hello world</custom-button&gt; </template&gt; CustomButton.vue <script lang="ts" setup&gt; import { buttonProps } from 'element-plus' const props = defineProps({ ...buttonProps, textColor: String, }) </script&gt; <template&gt; <el-button v-bind="props" :style="{ color: props.textColor }"&gt; <slot&gt;</slot&gt; </el-button&gt; </template&gt; — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you were mentioned.Message ID: ***@***.***&gt;

[zouyaoji]

@sxzz

This is a solution, but it doesn't seem very friendly either。
这是个解决办法，但似乎也不是特别友好。

For projects based on element-plus secondary development, many custom components will be added.
对于基于element-plus二次开发的项目，会增加很多自定义组件。

According to this statement:
按照这个说法:
vuejs/core#5272 (comment)

Is it possible that only Element Plus maintains the type definition of each component separately to better solve this problem.
是不是只有Element Plus每个组件单独维护类型定义才能较好的解决这种困扰。

[sxzz]

...没看懂你这个 issue。

[zouyaoji]

你看这个动图啊，
定义了 todoItemProps 变量，两个都不是必选的。
用 ExtractPropTypes 展开后得到的 TodoItemProps 类型，这2个Prop都变成必须的了。

我再定义一个 类型为TodoItemProps 的 myTodoItemProps 变量，只想传递其中部分属性就不行了。。

所以我认为这是不是 ExtractPropTypes 在展开Props得到类型定义时有问题。。。

[sxzz]

@zouyaoji ExtractPropTypes 是接收 props 的类型(用于setup的props参数），item 的默认值为 ''，可不就是必选了。

[zouyaoji]

@sxzz
落实到具体需求上就是

希望能很方便的这样定义一个变量

而不提示我还有其他属性没有定义上。

而且让我特别困惑的是，这个ButtonProp类型鼠标滑上去，看起来很多都是有"?"的可选属性啊，

如果没写，怎么还会提示缺了。。。

[zouyaoji]

@zouyaoji ExtractPropTypes 是接收 props 的类型(用于setup的props参数），item 的默认值为 ''，可不就是必选了。

嗯 我刚试了一下 String 类型确实是这样，去掉default就是可选的了。

但是 Boolean 类型好像不行，这咋搞 - -

[sxzz]

@zouyaoji 这个可能得自己用 TS 实现了。。

[zouyaoji]

@sxzz
嗯 目前只能这样了。

所以我好希望vue官方给解决这个问题，有类似的需求就不用再专门维护TS类型声明了。
我水平不够，不知道有没有可能实现这个需求，跑去看了vue里面的ExtractPropTypes，也是搞不懂。。。

尤大回复这个是说没必要这么搞吗？

[sxzz]

@zouyaoji 你那个issue的图片不是动图，有歧义。

[zouyaoji]

嗯 我明白了 感谢你的答疑解惑。

我准备把这边的讨论附过去，希望能表达清楚我的真实需求。