V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
devilte
V2EX  ›  TypeScript

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

  •  
  •   devilte · 2021-12-01 19:00:38 +08:00 · 1771 次点击
    这是一个创建于 1073 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    2 条回复    2022-04-25 17:50:17 +08:00
    liamhuangzzzz
        1
    liamhuangzzzz  
       2022-04-25 10:11:34 +08:00
    请问解决了吗
    devilte
        2
    devilte  
    OP
       2022-04-25 17:50:17 +08:00
    @liamhuangzzzz 没呢 setup 里甚至不支持引入外部的类型来作为 props 的类型, 目前只好放弃这种方式了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2728 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 12:11 · PVG 20:11 · LAX 04:11 · JFK 07:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.