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

更新时间：2024年06月19日 16:08:55 作者：左直拳

这篇文章主要介绍了vue3项目typescript如何export引入(imported)的interface问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3 typescript如何export引入的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: string
  time: string
  done: boolean
  color?: 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

vue3使用interface定义props

//此处注引入
import {PropType} from 'vue'
interface Cells{
    col:string,
    row:string,
    field:any
}
interface Subform {
    cells:Array<Cells>
}
//定义
const Props = {
     subform:{
         type:Object as PropType<Sumbform>,
         default:{}
     },
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

用vue2.0实现点击选中active其他选项互斥的效果
这篇文章主要介绍了用vue2.0实现点击选中active其他选项互斥的效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
详解Vue.js中引入图片路径的几种方式
这篇文章主要介绍了Vue.js中引入图片路径的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06
Vue事件处理中的上下文问题:原因与解决过程
本文将探讨 Vue 事件处理中常见的上下文问题及其解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-03-03
vue中想要mock数据在线上环境生效如何操作
本文主要介绍了在配置了mock数据之后在线上环境使用,主要通过在main.ts文件中注册和vite.config.ts文件夹中配置插件来实现,感兴趣的可以了解一下
2025-01-01
vue中使用echarts以及简单关系图的点击事件方式
这篇文章主要介绍了vue中使用echarts以及简单关系图的点击事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
vue2+element-ui使用vue-i18n进行国际化的多语言/国际化详细教程
这篇文章主要给大家介绍了关于vue2+element-ui使用vue-i18n进行国际化的多语言/国际化的相关资料,I18n是Vue.js的国际化插件,项目里面的中英文等多语言切换会使用到这个东西,需要的朋友可以参考下
2023-12-12
vxe-table 设置单元格垂直对齐的方法
在vxe-table中,可通过cell-style或cell-class-name设置单元格垂直对齐,使用verticalAlign: top实现顶部对齐,默认为垂直居中,合并单元格时同样支持此设置,本文给大家介绍vxe-table 设置单元格垂直对齐的方法,感兴趣的朋友一起看看吧
2025-06-06
Vue仿微信app页面跳转动画效果
这篇文章主要介绍了Vue仿微信app页面跳转动画效果，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
Vue开发实现滑动验证组件
这篇文章主要为大家详细介绍了如何利用Vue开发实现简单的滑动验证组件，并且适配移动和PC，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
2023-07-07
vue-virtual-scroll-list虚拟组件实现思路详解
这篇文章主要给大家介绍了关于vue-virtual-scroll-list虚拟组件实现思路的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-02-02