为了更好的支持Typescript类型检查,我们需要在Vue接口模块补充该库的全局方法,这样可以避免使用this.xxx
或proxy.xxx
(proxy为vue@2.7.14的getCurrentInstance().proxy
)
时提示xxx不存在于this或proxy
, 而且能在使用这些方法时获得IDE提示或能方便的查看对应方法的声明代码,模块补充方法如下:
// types/xxx.d.ts
// 1. 确保在声明补充的类型之前导入 'vue'
import Vue from 'vue'
import type {ProtoFunc} from '@zhangqingcq/plug-r-qw/types'
declare module 'vue/types/vue'{
interface Vue extends ProtoFunc{}
}
// 并将该文件包含在你的项目,如在tsconfig.json的include中添加该文件
// tsconfig.json
{
"include":["types/xxx.d.ts"]
}
国际化版本,需要在shims-vue.d.ts
文件(
或任何被包含在tsconfig.json的include中的非模块
xxx.d.ts文件)中声明国际化文件(plug-r-qw和view-design都要),如:
// shims-vue.d.ts or xxx.d.ts include in tsconfig.json
declare module '@zhangqingcq/plug-r-qw/lib/lang/en-US'
declare module '@zhangqingcq/plug-r-qw/lib/lang/zh-CN'
declare module '@zhangqingcq/view-design-r/dist/locale/en-US'
declare module '@zhangqingcq/view-design-r/dist/locale/zh-CN'
国际化版本在main.js安装plug-r-qw时国际化配置方法要定义参数类型,如:
// main.ts
Vue.use(plugRQw,{
...,
i18n(path:string,options:Record<string,any>){...}
})
如果用了lodash等自身没有声明文件的第三方库,也需要在shims-vue.d.ts
文件中声明相关模块(如果安装对应第三方声明依赖
如@types/lodash
,则不用),如:
// shims-vue.d.ts or xxx.d.ts include in tsconfig.json
declare module 'lodash'
declare module 'js-cookie'
该库从@zhangqingcq/plug-r-qw@1.3.12
开始支持Pinia
(Vuex的升级版),就是用Pinia
的useStore
替换之前Vuex
的store
,用法如下:
// main.ts
import {useStore} from './stores/main'
Vue.use(plugRQw,{useStore,...})