vue3项目中typescript如何export引入(imported)的interface

引入接口后,不能原封不动地直接export出去。

typescript支持面向对象语言中常见的接口(interface)、类(class)等。但我近几天发现,一个interface,通过import引入后,如果直接再export出去,是不行的。语法没有错,但运行时似乎出问题。比如,我写一个组件timeline,文件结构如下图所示。为规范其他模块调用,我在_type.ts中定义了一个接口,是关于数据类型的。
在这里插入图片描述
按照组件编写的套路,是在组件根目录下有一个index.ts,里面集成各种类型、部件,方便外部引用:

1、index.ts

import TimeLine from './_timeLine.vue'
import { EColor, IActivityItem as IActivityItemBase } from './_type'export { TimeLine, EColor }export type IActivityItem = IActivityItemBase

2、_type.ts

export enum EColor {blue = '#427df9',green = '#34a27f',red = '#c73641',gray = '#e4e7ed'
}export interface IActivityItem {title: stringtime: stringdone: booleancolor?: string
}

3、如何将接口IActivityItem传导出去?

在index.ts集成IActivityItem,就是想将它传导出去的。但是,如前所述,IActivityItem并没有直接定义在index.ts,而是在_type.ts中定义。之所以这样做,是因为组件的核心部件_timeline.ts也要用到它,由于index.ts有导入_timeline.ts,如果接口定义在index.ts,那么_timeline.ts势必要引用index.ts,这样就出现一个循环。我也不知道会不会有问题,但想想都不靠谱。

测试过程中,发现在index.ts中引入IActivityItem,然后又export出去,系统会卡住,不知道哪里出了问题:

import { EColor, IActivityItem } from './_type'export { EColor,IActivityItem }

枚举EColor这样做没有问题,接口IActivityItem就有问题,不知道什么原因。最后的解决办法是继承一下,再export出去:

import { EColor, IActivityItem as IActivityItemBase } from './_type'export { EColor }export type IActivityItem = IActivityItemBase

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/650152.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【HarmonyOS应用开发】TypeScript快速入门(二)

内容比较长,干货满满,全是实战操作内容,希望耐心观看,如果对你有所帮助,请点个赞! ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript(简称TS)的基础上,匹配ArkUI…

桌球室台球房计费系统的安装方法,台球厅计时计费管理系统软件试用版教程

桌球室台球房计费系统的安装方法,台球厅计时计费管理系统软件试用版教程 一、前言 1、软件的安装方法: 如图,我们以 佳易王桌球计时计费软件V18.0版本为例说明。软件下载后的文件是压缩包文件,将文件解压后,将文件夹…

Blender教程-视图分割与3D游标-05

一、简介 Blender试图分割的作用主要有以下几点: 多角度查看模型:通过视图分割,用户可以从多个角度查看和比较模型,更好地理解和评估模型的细节和比例。多模型处理:当你在Blender中同时处理多个模型时,视…

AWS 专题学习 P11 (Machine Learning)

文章目录 专题总览机器学习服务1. Amazon Rekognition2. Amazon Rekognition - Content Moderation3. Amazon Transcribe4. Amazon Polly5. Amazon Polly - Lexicon & SSML6. Amazon TranscribeAmazon Translate7. Amazon Lex & Connect8. Amazon Comprehend9. Amazon …

k8s实例

k8s实例举例 (1)Kubernetes 区域可采用 Kubeadm 方式进行安装。 (2)要求在 Kubernetes 环境中,通过yaml文件的方式,创建2个Nginx Pod分别放置在两个不同的节点上,Pod使用动态PV类型的存储卷挂载…

DolphinDB学习(2):增删改查数据表(分布式表的基本操作)

文章目录 创建数据表1. 创建数据表全流程2. 核心:创建table3. 在已有的数据表中追加新的数据 数据表自身的操作1. 查询有哪些数据表2. 删除某张数据表3. 修改数据表的名称 博客里只介绍最常见的分区表(createPartitionedTable)的创建方法&…

机器学习笔记:地理加权回归(GWR)

1 传统的线性回归 机器学习笔记:线性回归_线性回归的读书笔记-CSDN博客 最优的β为: 2 地理加权回归(GWR) 2.1 模型概述 地理加权回归(Geographically Weighted Regression,GWR)是传统回归分…

详解矩阵的LDU分解

目录 一. 矩阵分解 二. 解方程 三. 例题说明 四. 矩阵的LDU分解 五. 矩阵三角分解的唯一性 一. 矩阵分解 其实我们可以把一个线性系统(Linear System)看成两个三角系统(Triangular Systems),本文章将解释为什么可…

《PCI Express体系结构导读》随记 —— 第I篇 第3章 PCI总线的数据交换(5)

接前一篇文章:《PCI Express体系结构导读》随记 —— 第I篇 第3章 PCI总线的数据交换(4) 3.2 PCI设备的数据传递 PCI设备的数据传递使用地址译码方式,当一个存储器读写总线事务到达PCI总线时,在这条总线上的所有PCI设…

【陈工笔记-Transformer】Transformer的基础认识

对Transformer生动形象的比喻 Transformer包括了Encoder和Decoder,在知乎上看到了对两个部分关系的一种理解,非常有趣。即,“一个人学习跳舞,Encoder是看别人是如何跳舞的,Decoder是将学习到的经验和记忆,…

旷视low-level系列(一):Bayer Pattern Unification and Bayer Preserving Au

文章目录 1. Motivation2. Contribution3. Methods3.1 BayerUnify3.2 BayerAug 4. CommentsReference 1. Motivation 对于RAW域去噪,通常会将单通道bayer格式的RAW图打包成4通道,然后送入神经网络。不同厂家生产的sensor出的RAW图可能具有不同的bayer模…

SpringBoot中阿里云OSS的使用

目录 1 登录/注册阿里云并进入控制台 2 进入OSS控制台 3 创建bucket 4 查看bucket 5 获取AccessKey 6 查看帮助文档 7 添加Maven依赖 8 获取示例代码并改造成工具类 9 测试 1 登录/注册阿里云并进入控制台 2 进入OSS控制台 3 创建bucket 4 查看bucket 5 获取AccessKe…

最优化基础 - (最优化问题分类、凸集)

系统学习最优化理论 什么是最优化问题? 决策问题: (1)决策变量 (2)目标函数(一个或多个) (3)一个可由可行策略组成的集合(等式约束或者不等式约束…

Ubuntu使用Docker部署Redis并实现远程访问本地数据库

文章目录 前言1. 安装Docker步骤2. 使用docker拉取redis镜像3. 启动redis容器4. 本地连接测试4.1 安装redis图形化界面工具4.2 使用RDM连接测试 5. 公网远程访问本地redis5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定TCP地址远程访问 前言 本文主要介绍如何在Ub…

Windows10系统任务栏变小怎么处理

首先,邮件任务栏,点击任务栏设置; 然后,将小任务栏 使能关闭(图中为打开状态); 或者,你也可以取消锁定任务栏,然后在任务栏的边缘,进行上下拉拖动&#xff…

漏洞复现-EduSoho任意文件读取漏洞(附漏洞检测脚本)

免责声明 文章中涉及的漏洞均已修复,敏感信息均已做打码处理,文章仅做经验分享用途,切勿当真,未授权的攻击属于非法行为!文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直接或者间接的…

IDC机房交换机核心技术与应用指南

IDC机房交换机核心技术与应用指南 ​ 在这个快速发展的数字时代,数据中心作为信息技术的心脏,不仅承载着海量数据的处理、存储和传输,更是支撑着全球企业运营和互联网服务的关键基础设施。在众多构成数据中心的组件中,IDC机房交换…

【运行Python爬虫脚本示例】

主要内容:Python中的两个库的使用。 1、requests库:访问和获取网页内容, 2、beautifulsoup4库:解析网页内容。 一 python 爬取数据 1 使用requests库发送GET请求,并使用text属性获取网页内容。 然后可以对获取的网页…

2024 高级前端面试题之 JS 「精选篇」

该内容主要整理关于 JS 的相关面试题,其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。 JS模块精选篇 1. 数据类型基础1.1 JS内置类型1.2 null和undefined区别1.3 null是对象吗?为什么?1.4 1.toString()为什么可以调用&#xff1…

LLM之Agent(九)| 通过API集成赋能Autogen Multi-Agent系统

随着大型语言模型的快速发展,构建基于LLM驱动的自治代理(autonomous agents)已经成为一个备受关注的话题。仅在过去一年中,就出现了许多基于这一理念的新技术和框架。 ​ 本文将探索微软开源的Agent框架:Autogen…