我有一个对泛型组件的需求,不知该如何实现

这个泛型约束主要是针对 其他 组件调用此组件时 对props的约束,而非本组件自身的约束,具体的功能还是用代码来说明吧;

泛型需求1
泛型需求2
以上两张图不知是否表达清楚.

防沉自顶。希望来位大佬解答一下

props:{
  prop:String as PropType<'a' | 'b'>
}

defineComponent是已定义的函数,怎么加模板类型,PropType本来就是约束

目前来说,好像没办法实现。有没有什么好的思路进行绕过去呢?看过defineComponent的声明文件,太过庞杂了。以目前我的能力,想不到什么绕过的方法。

不知道你到底想干些什么,这些操作不都是多此一举么?

function  xxx <T> (props:T,options:any){
  return defineCompoent({props,...options})
} 

element-plus 中使用的方法(目的是让父子组件状态数据传递使用 MenuProvider)

// menu.ts
export const menuProps = buildProps({ // form 'element-plus'
  mode:{
    type: String,
    values:['horizontal','vertical'],
    default: 'vertical'
  },...
})
export type MenuProps = ExtractPropTypes<typeof menuProps> // from 'vue'
// types.ts
export interface MenuProvider{
  openedMenus: string[]
  ...
  props: MenuProps // use MenuProps
}

你图2要的效果我上条回答就已经回答了

不不不.不是这样的. 你现在的这个答案是指明 在 本组件内部可以使用泛型.我的要求是在外部使用泛型.
而你上一条回答 则是 将 每一个需要用到的 props都做手动的限制. 而我图1 中的例子想达到的目的则是 keyof T 而非 固定的 “a”|“b”; “a” | “b” 是通过T进行推导出来的. 因为T是不固定的类型.
例如: element-ui 中的表格 的 一些事件 或 方法中传递过来的参数 就是 row, column, cell, 并不能确定row 与 所传递进去的 data的关系. 我所想要达到的目的则是 这个row 就应该 是 data数组的其中一个成员类型的提示,而非直接是 object或any

vue的props,似乎不支持T。
唯一沾边的方法是 K extends keyof T,当然这个也不行。需要 vue 提供支持。

function getProperty<T, K extends keyof T>(obj: T, key: K) {
    return obj[key];
}

let x = { a: 1, b: 2, c: 3, d: 4 };

getProperty(x, "a"); // okay
getProperty(x, "m"); // error: Argument of type 'm' isn't assignable to 'a' | 'b' | 'c' | 'd'.

另外,你想一想呀,加载组件的时候,如何传入一个 泛型进去?
或者设置组件的属性的时候,传入一个泛型?

是的,就目前来说,搜索过很多地方,都没有发现props该怎么支持泛型。希望vue能够尽早支持。

组件的 props 不会支持泛型,支持了也没有意义。