vue3專案中，如果不用ts這樣使用是沒問題的
const { proxy } = getCurrentInstance()在ts中使用會報錯：報錯：...類型「ComponentInternalInstance | null”
我們在專案中一般會用到很多getCurrentInstance()方法，直接封裝一下
建立useCurrentInstance.ts檔：
import { ComponentInternalInstance, getCurrentInstance } from 'vue'
export default function useCurrentInstance() {
const { appContext } = getCurrentInstance() as ComponentInternalInstance
const proxy = appContext.config.globalProperties
return {
proxy
}
}元件內使用：
<script lang="ts">
import { defineComponent } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
export default defineComponent({
setup() {
const { proxy } = useCurrentInstance();
console.log(proxy);
},
});
</script>vue3中沒有this 各種api的方法
vue3提供的方法，並建立類似this的實例。
const instance = getCurrentInstance()
const a1= getCurrentInstance();
a1.$toast({type: 'error', text: '登录失败' });這種只適合本地調試，運行到線上就會報錯，報錯詳情為：
類型“ComponentInternalInstance | null”上不存在屬性“proxy”。 ts(2339)
然後下面會報這個錯誤
Unsafe member access .$axios on an `any` value. eslint@typescript-eslint/no-unsafe-member- access
Unsafe call of an `any` typed value. eslint@typescript-eslint/no-unsafe-call
#原因：
getCurrentInstance()的回傳類型存在null所以在此處新增斷言即可。
在proxy後面加上?來過濾null的結果，即：
const instance = getCurrentInstance()?.proxy instance ?.$toast('请xxx！')
以上是Vue3之getCurrentInstance與ts怎麼結合使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
