在通过this引用的自定义控件中添加Vue中的类型声明，$refs

发布于：2024-10-24 编辑：匿名来源：网络

0x00 hello world 最近在一个新项目中，尝试了vue2+typescript的结合，又遇到了一个问题：定义一个自定义的控件Foo .vue 并在控件中定义方法 Bar() 。使用自定义控件时，添加ref='foo'，希望通过this.$refs.foo.Bar()来调用该方法。

当然，它可以成功。调用了，但是在TypeScript中，会报错。

在图1之后，我挣扎了很长时间，想出了一个不太优雅的方法：图2是这样的。虽然没有报错，但是TypeScript被写入了AnyScript中。

如果我修改Bar的定义，比如添加一个参数，这里就不会出现错误提示，告诉我少了一个参数，就失去了使用TypeScript的意义。 0x01 我尝试过的优雅方式 (this.$refs.foo as Foo).Bar();不，我尝试过 (this.$refs.foo as typeof Foo).Bar();不，由于某种错误，我尝试了 Next (this.$refs.foo as InstanceType).Bar();，它有效！我感觉棒极了！这意味着什么？图30x02 原理？为了理解这意味着什么，我研究了Vue类型定义文件。

Vue.extend 的定义如下：代码语言：typescript copyextend(options?:ThisTypedComponentOptionsWithArrayProps):ExtendedVue>；扩展 <数据，方法，计算，道具>（选项？：ThisTypedComponentOptionsWithRecordProps ）：ExtendVue ;扩展(定义：FunctionalComponentOptions, PropNames[]>): ExtendedVue>;扩展(定义：FunctionalComponentOptions>): ExtendedVue; extend(options?: ComponentOptions): ExtendedVue;返回 ExtentedVue，他的定义如下：代码语言：typescript复制导出类型 ExtendedVue = VueConstructor & Vue>;返回的是一个VueConstructor，他的定义如下：代码语言：typescript 复制export interface VueConstructor { new (options?: ThisTypedComponentOptionsWithArrayProps< V，数据，方法，计算，PropNames>）：CombinedVueInstance>； // 理想情况下，返回类型应该只包含 Props，而不是 Record。但 TS 要求 Base 构造函数具有相同的返回类型。

新<数据=对象，方法=对象，计算=对象，道具=对象>（选项？：ThisTypedComponentOptionsWithRecordProps ）：CombinedVueInstance>；新（选项？：ComponentOptions）：CombinedVueInstance>；扩展<数据，方法，计算，PropNames扩展字符串=从不>（选项？：ThisTypedComponentOptionsWithArrayProps ）：ExtendVue >; 扩展 <数据，方法，计算，道具>（选项？：ThisTypedComponentOptionsWithRecordProps ）：ExtendVue ; extend(定义：FunctionalComponentOptions, PropNames[]>): ExtendedVue>; 扩展（定义：FunctionalComponentOptions>）：扩展dVue; 扩展(选项?: ComponentOptions): ExtendedVue; nextTick(回调: (this: T) => void, 上下文?: T): void; nextTick(): Promise set(对象: 对象, 键: 字符串 | 数字, 值: T): T; set(数组: T[], 键: 数字, 值: T): T; 删除（对象：对象，键：字符串|数字）：void；删除(数组: T[], 键: 数字): void; 指令（id：字符串，定义？：DirectiveOptions | DirectiveFunction）：DirectiveOptions；过滤器（id：字符串，定义？：函数）：函数；组件（id：字符串）：VueConstructor；组件 (id: 字符串, 构造函数: VC): VC; 组件 <数据，方法，计算，道具>（id：字符串，定义：AsyncComponent <数据，方法，计算，道具>）：ExtendVue ; 组件 <数据、方法、计算、PropNames 扩展 string = never>（id：字符串，定义？：ThisTypedComponentOptionsWithArrayProps）：ExtendVue >; 组件 <数据，方法，计算，道具>（id：字符串，定义？：ThisTypedComponentOptionsWithRecordProps ）：ExtendedVue ; 组件（id：字符串，定义：FunctionalComponentOptions，PropNames []>）：ExtendVue>; 组件（id：字符串，定义：FunctionalComponentOptions >）：ExtendVue ; 组件（id：字符串，定义？：ComponentOptions）：ExtendVue；使用（插件：PluginObject | PluginFunction; use(插件: PluginObject | PluginFunction, ...选项:any[]): VueConstructor; mixin(mixin: VueConstructor | ComponentOptions): VueConstructor; 编译（模板：字符串）：{ 渲染（createElement：typeof Vue.prototype.$createElement）：VNode; staticRenderFns: (() => VNode)[]; }; observable(obj: T): T; util: { warn(msg: string, vm?: InstanceType): void; }; 配置：Vue配置； version: string;}注意前面3行，那几个名字为new的函数：代码语言：typescript复制 new (options?: ThisTypedComponentOptionsWithArrayProps< V，数据，方法，计算，PropNames>）：CombinedVueInstance>； // 理想情况下，返回类型应该只包含 Props，而不是 Record。但是TS 要求具有相同返回类型的 Base 构造函数。

新<数据=对象，方法=对象，计算=对象，道具=对象>（选项？：ThisTypedComponentOptionsWithRecordProps）：CombinedVueInstance>;新（选项？：ComponentOptions）：CombinedVueInstance>；也就是说当new一个Vue实例时，返回的类型是CombinedVueInstance。该类型的定义如下：代码语言：typescript复制导出类型CombinedVueInstance=Data&Methods&Compulated&Props&Instance;这个CombinedVueInstance的目的是组合组件定义的内容与Vue本身的内容0x03 总结：在JavaScript中，一个事物有两种类型（函数？类型？），一种是它的原始类型，另一种是实例化后的实例类型。

这两种类型可能不一样。相同; Vue 的类型和 Vue 实例化后的类型不是同一个类型。

Vue的类型为VueConstructor类型，实例化后的类型为CombinedVueInstance；我需要的是实例化后的类型，所以 Foo 是我导入的。对于变量来说，它的类型是通过Foo的type来获取的。

然而我需要的是它的实例化类型，所以我还需要通过InstanceType来获取它。 0x04 特别感谢TDP党员若海在此过程中的无私帮助！腾讯云开发者先锋（TDP，腾讯云开发者先锋）是腾讯云GTS正式成立并运营的技术开发者团体。

这里有最专业的开发者和客户，可以与产品人员近距离接触，有专门的问题和需求反馈渠道，有一群志同道合的兄弟姐妹。有兴趣的朋友可以关注腾云先锋队，加入TDP。

站长声明

标签：

上一篇：03：一文搞懂稳定扩散扩散去噪原理，玩转AI画画

下一篇：腾讯云推出云原生etcd服务

转转牵头投资建立B2B二手交易平台“菜货侠”，深度探索二手手机产业链

据投资界11月27日消息，领先的二手交易平台转转在中国，宣布联手线上二手回收平台Flash Recycling以及齐跃、一品等国内领先供应链企业共同投资成立公司，正式上线B2B二手交易平台“彩火霞”。据了解，新公司将由转转控股并独立运营，联合创始人、副总裁、相昌峰担任新公司的

06-18
Acciona Energia计划在昆士兰州建设600MW光伏电站

据报道，西班牙可再生能源巨头Acciona Energia近日表示，已为其规划中的澳大利亚昆士兰州兆瓦级光伏电站签署了供电协议。拟在该州格拉德斯通地区建设一个3GW大型绿色氢能项目来提供电力。 Acciona表示，昆士兰州政府已批准该公司Aldoga光伏电站的土地，该电站将为昆士兰州政

06-08
新光维医疗完成近4亿元B轮融资，重点关注内窥镜等医疗器械

投资社区（ID：pedaily）据8月5日消息，新光维医疗今日宣布获得近4亿元A轮融资B融资。本轮投资投资者包括Hudson Bay Capital Management、Prime Capital等新投资机构，现有股东Hillhouse Ventures、礼来亚洲基金、经纬中国等继续支持公司。本轮融资将继续用于内窥镜及相关领

06-18
杭州5G产学研融合创新园启动

国内首个5G全覆盖、5G产学研条件齐全的创新园——中国（杭州）5G创新园在杭州余杭正式启动。创新园旨在推动5G在智慧城市、智能网联汽车、工业互联网、社会服务等多个领域的融合应用和创新发展，打造5G创新高地。 5G作为新一代移动通信技术的发展方向，以其高速率、低时延、大

06-06
一年三轮融资，中银微电子获超亿元B轮融资

投资界（ID：pedaily）据1月2日消息，中银微电子宣布完成超亿元B轮融资元。本轮融资由国投创投领投，老股东卓远资本等持续加大投资。本次融资所筹资金将进一步用于企业级高速接口IP和Chiplet产品的研发，加速Chiplet产品的快速落地和人才引进。中银微电子作为重大引进项目

06-18
知识产权质押信息平台将于近期上线

国家发改委新闻发言人金贤东19日在例行新闻发布会上透露，知识产权质押信息平台已经建成，将于近期正式上线未来。平台坚持公益性服务原则，将免费向社会公众提供知识产权质押登记信息、金融产品信息、企业信用信息查询、知识产权业务导航等综合服务。

06-17
晶芯生物完成近亿元天使轮融资，主导开发视觉诊疗一体化靶向核药物

晶芯生物医学科技（南京）有限公司（以下简称“晶芯生物”）》）宣布完成近亿元天使轮融资该轮融资由高榕资本领投，投资方包括VI Ventures、骊宸 Capital和老股东凯泰 Capital。本轮融资将主要用于加速晶芯生物在研的多个创新靶向核药物推进至临床阶段，升级其核药物研发平

06-18
【创业24小时】2024年5月28日

产业巨头公司爱优腾芒B2024年5月28日一季报：提升效率，求“执行力” 点击查看小红书电商店直播，买手的两项业务运营和商户运营合并。点击查看叮咚买菜连续六个季度盈利。前端仓库模式运行是否顺利？点击查看本地生活数据“自热火锅”：降价清仓卖不出去。自热火锅为何会变

06-18
新项目NO.34｜独家专访美克盛能源副总裁胡金双：数字能源与储能安全领域的“双独角兽”

随着人类社会的电气化、信息化，我们在享受人类社会所取得的成就的同时科学技术，我们也在享受科学技术的成果。承担温室效应和气候变化的成本。大自然向人类发出了预警。在“双碳”目标背景下，绿色能源如何惠及大众？如何创造更安全的绿色能源生活？本期《看见新项目》专

06-18
曾估值18亿，刘诗诗和赵丽颖投资的公司赴港IPO

明星，刘诗诗的“高聘礼”即将上市。 7月20日，江苏稻草熊影业股份有限公司（以下简称“稻草熊影业”）向香港联交所提交招股说明书，正式启动上市程序。招股书显示，稻草熊是一家国产剧制作人和发行商，旗下知名剧目有《蜀山战纪之剑侠传奇》、《局中人》等。熊影业的投稿之

06-18
扎克伯格希望以 499 美元的价格，用最新的 VR 耳机来挑战 Apple

Quest 如果不出意外的话，将会发生一些事情。这个经典的网络迷因也发生在 Meta 身上。北京时间9月28日凌晨，Meta Connect大会原定于凌晨1点开始直播。但不知为何推迟了30分钟，上演了一出“重新定义凌晨1点”的大戏。作为当天发布会的主角的最新VR头戴设备Quest 3，扎克伯

06-18
炙手可热的金融科技该如何面对机遇与挑战？

9月15日22时04分09秒，长征二号FT2火箭将天宫二号空间实验室升空，冲向太空。飞行器进入预定轨道后，空间实验室任务总指挥弗拉基米尔张又侠宣布，发射任务取得圆满成功！天宫二号是我国第一个真正的空间实验室。它的设计寿命为两年。为满足中期居住需求，载人居住环境得到

06-17