vue3 父组件给子组件传递泛型（不用JSX）

最近在封装一个组件，使用的时候希望父组件能给子组件传递一个泛型，在网上搜了半天，答案都是说要用jsx才能实现。具体写法如下：

使用JSX

这段代码来自Eluxjs的示例项目elux-vue-antd-admin，感兴趣的可以看下。
父组件： (为减少篇幅，代码删了很多，当伪代码看吧)

const Component = defineComponent<Props>({
  props: ['listPathname', 'mergeColumns'] as any,
  setup(props) {
    return () => {
      return (
        <MTable<ListItem> // 这里使用子组件MTable，传递泛型ListItem
          size={tableSize}
          commonActions={commonActions}
          selection={selection}
          loading={listLoading === 'Start' || listLoading === 'Depth'}
        />
      );
    };
  },
});

export default Component;

子组件：(子组件比较麻烦)

interface Props<T = Record<string, any>> extends TableProps<T> {
  class?: string;
  columns: MColumns<T>[];
  selectedRows?: Partial<T>[];
  selection?: MSelection<T>;
}

const Component = defineComponent<Props>({
  name: styles.root,
  props: [
    'class',
    'columns'
  ] as any,
  setup(props: Props) {
    return () => {
      const {class: className = '', dataSource, onChange, rowKey = 'id', loading, size, bordered, locale, scroll} = props;
      return (
        <div class={styles.root + ' ' + className}>
          {headArea.value}
          <Table
            columns={columnList.value}
            rowSelection={rowSelection.value}
            onChange={onChange}
            size={size}
          />
        </div>
      );
    };
  },
}) as any;

export default Component as <T>(props: Props<T>) => JSX.Element;

这里使用 Component as <T>(props: Props<T>) => JSX.Element; 来做到接收泛型，但消费它的父组件必须用 jsx。
注：Vue3.3版本给defineComponent增加了泛型函数的支持，不用这样写了。
因为项目不方便用jsx，我找了很久如何用template来传递泛型，终于找到了！

使用Template

先看子组件：

<script
  lang="ts"
  setup
  // 关键：setup script有个generic属性，可以声明泛型，供组件使用
  generic="T extends { name: string; age: number; }, Q extends { title:string }"
>
// 在props中使用泛型，rowKey使用keyof T，plainObj使用第二个泛型Q
defineProps<{
  personList: T[];
  rowKey: keyof T;
  plainObj: Q;
}>();
</script>

<template>
  <div>
    // 模板中正常使用props
    <h3 v-for="item in personList" :key="item.name">
      {{ item.age }}
    </h3>
    // 用插槽向父组件暴露数据，plainObj的类型是Q
    <slot :obj="plainObj" />
  </div>
</template>

generic属性的作用就是给组件中使用的泛型提供一个“来源”，这样父组件消费子组件的时候，只要给personList传递一个数据，泛型T就会被自动推断出来。

generic属性的泛型可以选择extends一些已知的属性，因为子组件自身使用到props的哪些属性，和消费该组件的地方是无关的。

父组件：

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue';
// 给list的item声明类型，该类型可以是子组件T的超集
interface DataType {
  name: string;
  age: number;
  gender: 'male' | 'female' | 'wallmart bag';
  hobby?: 'jk' | 'dk' | '敌法师';
}
const list: DataType[] = [
  {
    name: 'ming',
    age: 20,
    gender: 'male',
    hobby: '敌法师'
  },
  {
    name: 'hong',
    age: 20,
    gender: 'female'
  },
  {
    name: 'hua',
    age: 20,
    gender: 'wallmart bag'
  }
];
</script>

<template>
  <div>
    <HelloWorld
      :person-list="list"
      row-key="genderr"
      :plainObj="{ happy: true, title: '抬头' }"
      v-slot="{ obj }"
    >
      <!-- 👆 不能将类型“"agg"”分配给类型“keyof T”。 -->

      {{ obj.happ }}
      <!-- 👆 属性“happ”在类型“{ happy: boolean; title: string; }”上不存在。你是否指的是“happy”? -->
    </HelloWorld>
  </div>
</template>

<style></style>

可以看到，子组件推断出了T的类型是DataType，报错 类型"genderr"不可分配给类型“keyof T”。你的意思是"gender"? 。
Q也成功的推断了出来，报错 属性“happ”在类型“{ happy: boolean; title: string; }”上不存在，这里的 { happy: boolean; title: string; } 即是我们传给 plainObj 属性的泛型Q

这样就实现了父组件通过props，给子组件传递所需的泛型。