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

2021-12-01 19:00:38 +08:00
 devilte

看了 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还有别的方法吗?

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

1602 次点击
所在节点    TypeScript
2 条回复
liamhuangzzzz
2022-04-25 10:11:34 +08:00
请问解决了吗
devilte
2022-04-25 17:50:17 +08:00
@liamhuangzzzz 没呢 setup 里甚至不支持引入外部的类型来作为 props 的类型, 目前只好放弃这种方式了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/819370

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX