Vue3 で ts を使用して getCurrentInstance を使用する方法

getCurrentInstance は ts と組み合わせて使用​​されます

vue3 プロジェクトでは、ts なしで使用しても問題ありません

const { proxy } = getCurrentInstance()

ts で使用すると、エラーが報告されます: Error:。 ..「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
    }
}

Useコンポーネント内:

<script lang="ts">
import { defineComponent } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
export default defineComponent({
  setup() {
    const { proxy } = useCurrentInstance();
    console.log(proxy);
  },
});
</script>

vue3 getCurrentInstance 使用時に ts がエラーを報告する

vue3 には this がありません。さまざまな API メソッド

Vue3 には、これと同様のインスタンスを作成するメソッドが用意されています。

const instance = getCurrentInstance() 

const a1= getCurrentInstance();
a1.$toast({type: 'error', text: '登录失败' });

これはローカル デバッグにのみ適しています。オンラインで実行するとエラーが報告されます。エラーの詳細は次のとおりです:

属性「プロキシ」がタイプ「ComponentInternalInstance | null」に存在しません。 」。 ts(2339)

このエラーは以下で報告されます

安全でないメンバーは、「任意」の値で .$axios にアクセスします。eslint@typescript-eslint/no-unsafe-member - access

「任意の」型指定値の安全でない呼び出し。eslint@typescript-eslint/no-unsafe-call

理由:

getCurrentInstance() の戻り値の型は null なので、ここにアサーションを追加するだけです。

プロキシの後に ? を追加して、null 結果をフィルタリングします。つまり:

const instance = getCurrentInstance()?.proxy  
 instance ?.$toast('请xxx！')

以上がVue3 で ts を使用して getCurrentInstance を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。