記錄一下踩過的坑
在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才對，今天測試把套件拿掉結果一樣可以跑，所以就這樣吧～
