vite vue3 ts踩過的坑

記錄一下踩過的坑

在src/interface/index.ts寫了如下

export interface iSelf {

id: number

phone: string

role: number

email?: string

name_ch?: string

name_en?: string

gender: number

identity_id?: string

birthday?: string

resident_status: string

}

export interface iUser extends iSelf {

checked: boolean

}

再引用時卻出現

Uncaught SyntaxError: The requested module 'src/interface/index.ts' does not provide an export named 'iUser'

這沒道理啊，一個檔案寫一個interface就正常，寫兩個就抱錯了！

網上高手給出ts3.8的export type特性

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html?fbclid=IwAR1pDqvqiYjNJkzFarak8i29xKAnPCCtK5fy2xgjUUmcS0BW4eRnqaesISo

但使用過後依然沒效

最終找到 https://github.com/vitejs/vite/issues/2117 這理尤大給出的答案，vite只支援ES Module，所以對於typescript的支援需要安裝套件

基本上安裝@rollup/plugin-typescript + tslib，然後到vite.config.ts加上plugin

import typescript from "@rollup/plugin-typescript"

export default defineConfig({

plugins: [vue(), typescript()],

})

然後src/interface/index.ts修改如下

/// <reference path="_user.d.ts" />

src/interface/_user.d.ts內容如下(對於src/interface模組進行擴充)

declare module "src/interface" {

interface iSelf {

id: number

phone: string

role: number

email?: string

}

interface iUser extends iSelf {

checked: boolean

}

}

使用方式如下(注意是import type)

import type { iUser } from "src/interface"

const datas: Array<iUser> = []

這樣運行就正常了

----------------------- 我是分隔線 ------------------------

以下不是常規方法，但總算是我試出來的分法，也記錄一下

如果不想引用套件，那src/interface/index.ts就要額外宣告變數

/// <reference path="_user.d.ts" />

export const iUser = {}

export const iSelf = {}

使用

import { iUser } from "src/interface"

但這樣有時還是會錯誤，iUser有時會被認為是any，所以還是乖乖正規吧

小結

看來一門技術只出來一年，還是有許多坑要採，沒關係要用就用得徹底一點，繼續踩坑吧

----------------------- 我是分隔線 ------------------------

9/5補充

不知為何當天需要安裝@rollup/plugin-typescript, tslib套件，vite原生就可以支援typescript才對，今天測試把套件拿掉結果一樣可以跑，所以就這樣吧～