[TypeScript] 请教一下如何在 Vue3.x < script setup>语法中定义带泛型的 props

看了 GitHub 上几个开源 UI 库都没有用 setup 语法的的,所以那种情况好像不存在这个困境,只好来这里请教一下大佬们。

比如,我想写一个Table组件,我理想中它的props类型是这样子的:

// types.ts export type Column<T> = { name: keyof T; label: string; width?: number;
}; export interface TableProps<T = any> { dataSource: Array<T>; columns: Array<Column<T>>;
}
// 泛型约束了一下 column 里的 name 一定是 dataSource 里列名对应

Table.vue组件里,需要接收一下props,我琢磨着这样写:

// Table.vue <script setup lang="ts">
import { Column, TableProps } from "./types"; withDefaults(defineProps<TableProps<T>>(), { tableData: () => [] as Array<T>, columns: () => [] as Array<Column<T>>,
});
</script>

但是这里写T不对的。这个T本身就是为了不固定的,这里又需要明确传入一个类型。

所以请教一下这里除了把T替换成any还有别的方法吗?

有没有知道的大佬给一个正确的写法?

发表评论

您的电子邮箱地址不会被公开。