vue3項(xiàng)目typescript如何export引入(imported)的interface問題
vue3 typescript如何export引入的interface
引入接口后,不能原封不動地直接export出去。
typescript支持面向?qū)ο笳Z言中常見的接口(interface)、類(class)等。
但我近幾天發(fā)現(xiàn),一個interface,通過import引入后,如果直接再export出去,是不行的。
語法沒有錯,但運(yùn)行時似乎出問題。
比如,我寫一個組件timeline,文件結(jié)構(gòu)如下圖所示。
為規(guī)范其他模塊調(diào)用,我在_type.ts中定義了一個接口,是關(guān)于數(shù)據(jù)類型的。

按照組件編寫的套路,是在組件根目錄下有一個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傳導(dǎo)出去?
在index.ts集成IActivityItem,就是想將它傳導(dǎo)出去的。
但是,如前所述,IActivityItem并沒有直接定義在index.ts,而是在_type.ts中定義。
之所以這樣做,是因?yàn)榻M件的核心部件_timeline.ts也要用到它,由于index.ts有導(dǎo)入_timeline.ts,如果接口定義在index.ts,那么_timeline.ts勢必要引用index.ts,這樣就出現(xiàn)一個循環(huán)。
我也不知道會不會有問題,但想想都不靠譜。
測試過程中,發(fā)現(xiàn)在index.ts中引入IActivityItem,然后又export出去,系統(tǒng)會卡住,不知道哪里出了問題:
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:{}
},
}
總結(jié)
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果
這篇文章主要介紹了用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue中想要mock數(shù)據(jù)在線上環(huán)境生效如何操作
本文主要介紹了在配置了mock數(shù)據(jù)之后在線上環(huán)境使用,主要通過在main.ts文件中注冊和vite.config.ts文件夾中配置插件來實(shí)現(xiàn),感興趣的可以了解一下2025-01-01
vue中使用echarts以及簡單關(guān)系圖的點(diǎn)擊事件方式
這篇文章主要介紹了vue中使用echarts以及簡單關(guān)系圖的點(diǎn)擊事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
vue2+element-ui使用vue-i18n進(jìn)行國際化的多語言/國際化詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于vue2+element-ui使用vue-i18n進(jìn)行國際化的多語言/國際化的相關(guān)資料,I18n是Vue.js的國際化插件,項(xiàng)目里面的中英文等多語言切換會使用到這個東西,需要的朋友可以參考下2023-12-12
Vue開發(fā)實(shí)現(xiàn)滑動驗(yàn)證組件
這篇文章主要為大家詳細(xì)介紹了如何利用Vue開發(fā)實(shí)現(xiàn)簡單的滑動驗(yàn)證組件,并且適配移動和PC,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-07-07
vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路詳解
這篇文章主要給大家介紹了關(guān)于vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-02-02

