Vue 3 - 将组件和道具用作函数参数时指定它们的类型
P粉709644700
P粉709644700 2024-01-05 23:55:40
[Vue.js讨论组]

在 Vue 3 中,我正在创建一个函数,它将接受组件的实例和要传递的属性。我也在使用 TypeScript,想知道是否可以输入这些参数。例如,该函数将类似于:

const example = (component, props) => {
  //
};

所以我的问题是:

  1. 如何指定组件实例的类型?这些并不总是相同的组件,但至少是用于类似目的的组件。
  2. 有没有办法让我指定道具的类型并将其限制为第一个参数(组件)的道具?


P粉709644700
P粉709644700

全部回复(1)
P粉917406009

您可以使用 typescript 提供的许多功能和 vue 中的 Component 类型来实现正确的键入,创建一个扩展 Component 的通用类型,然后推断组件选项/props 使用 infer,使用 Partial 使它们成为可选:

import type { Component } from "vue";

function example<T extends Component>
(Comp: T, props: T extends Component<infer P> ? Partial<P> : never) {
 //....
  }

example(Alert, { variant: "success"})

注意:这也推断属性和组件实例实用程序

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号