我们使用TypeScript编写Vue时在写入Api的分类时遇到问题下面是用JS的写法
// main.js
import '@apis/Api'
我们写一个Inputs的Api接口
// apis/Api.js
import Inputs from './Inputs'
Vue.prototype.$Inputs = Inputs
import request from "@/uitls/request/request";
import {AxiosRequestHeaders, AxiosResponse}from "axios";
async function inputs(formData: FormData| JSON,headers?: AxiosRequestHeaders): Promise<AxiosResponse> {
return request({
url: '/input',
method: 'POST',
headers: headers,
data: formData,
});
}
export default inputs;
然而调用TypeScript会报错
this.$input(formData, headers)
.then((res: unknown)=>{
console.log(res)
})
找不到$input方法|未能加入Vue原型
我们在Vue官方文档会发现这样一个文档
Vue官方文档
于是我们需要写文件声明
然后在这里创建types文件夹或者写index.d.ts都行，我这里是这样写的
TS文件申明原则
import Vuefrom 'vue'
declare module 'vue/types/vue' {
interface Vue {
$input(formData: FormData,headers: unknown): Promise<unknown>,
}
}
接下来我们在看编译结果，在用this来调用是否成功加入原型方法
Webpack .ESLineTRC编译成功
IDE出现了提示
已经加入了Vue原型方法
POST请求成功
这样我们就实现了Vue的原型属性声明和方法声明，当然还可以接口合并(Merge)等方法。
