Vue3修改模板的Props类型声明,或是像antd中一样挂载静态的其它组件模板.

PS:以下代码使用.tsx进行转换,转换之后可正常的用于.vue文件中

1.往原组件原型上挂载静态的其它组件.

//xxx.tsx
import CompA from './CompA.vue';
import CompB from './CompB.vue';
type TranBase = typeof CompA;
interface TransInter extends TranBase {
  CompB: typeof CompB;
}
const TransForm = CompA as TransInter;
CompA.CompB = CompB;
export default TransForm;

使用效果:

已经可以点出 CompB 组件了,并且测试过.功能完整.

2.修改props的类型声明.

PS:多于用$atrrs直接透传属性的情况.

import CompA from './CompA.vue';
import CompB from './CompB.vue';
type TranBase = typeof CompA;
interface TransInter extends TranBase {
    //核心,新增此句,重新声明了原组件的props
  (props: { name: string; age: number }, { slots }: { slots: any }): JSX.Element;
  CompB: typeof CompB;
}
const TransForm = CompA as TransInter;
CompA.CompB = CompB;
export default TransForm;

然后,组件上已经有了name和age必传的提示.

• 完 -