Vue3之getCurrentInstance與ts怎麼結合使用

getCurrentInstance與ts結合使用

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 ts使用getCurrentInstance報錯誤

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中文網其他相關文章！