1

我是 TypeScript 的新手，并尝试将它与 Vue 3 组合 API 一起使用并提供/注入。假设在父组件中A我有这样的东西：

// Parent component A

import { provide, ref } from 'vue';
import ScoreType from "@/types/Score";

setup() {
  ..
  const score = ref<ScoreType[]>([]);
  const updateScore = (val: ScoreType) => {
    score.value.push(val);
  };

  provide('update_score', updateScore);  
  ..
}

...然后想updateScore在子组件中注入函数B以便能够更新父组件中的值A（这是文档推荐的）。不幸的是，我收到一个 TS 错误Object is of type 'unknown'

// Child component B

import { inject } from 'vue';

setup() {
  ..
  const updateScore = inject('update_score');
  const checkAnswer = (val: string) => {
    updateScore({ /* ScoreType object */ });  // → Object is of type 'unknown'.
  }
  ..
}

我应该怎么做才能修复 TypeScript 错误？我找不到任何关于在 TS 中注入更新函数的示例。

4

1 回答 1

1

updateScore()让我们首先为我们的函数声明一个类型

// @/types/score.ts
export type ScoreType = { points: number };

export type UpdateScoreFunction = (val: ScoreType) => void;

现在我们需要声明一个InjectionKey它将保存我们提供/注入的变量（在本例中为函数）的类型信息。更多关于它的信息在Vue 文档中

让我们创建一个单独的文件夹来存储我们的密钥并保持事物井井有条：

// @/symbols/score.ts
import { InjectionKey } from "vue";
import { UpdateScoreFunction } from "@/types/score";

export const updateScoreKey: InjectionKey<UpdateScoreFunction> = Symbol("updateScore");

在我们的父组件中(A)：

<script lang="ts">
import { defineComponent, provide, ref } from "vue";

import { ScoreType, UpdateScoreFunction } from "@/types/score";
import { updateScoreKey } from "@/symbols/score";

export default defineComponent({
  setup() {
    const score = ref<ScoreType[]>([]);
    
    // Actually, adding ': UpdateScoreFunction' is optional 
    const updateScore: UpdateScoreFunction = function (val: ScoreType) {
      score.value.push(val);
    };

    // Replace the string with InjectionKey
    provide(updateScoreKey, updateScore);

    // ...
  },
});
</script>

在我们的子组件中(B)：

<script lang="ts">
import { defineComponent, inject } from "vue";
import { updateScoreKey } from "@/symbols/score";

export default defineComponent({
  setup() {

    // Replace the string with InjectionKey
    const updateScore = inject(updateScoreKey);

    // In case the `updateScoreKey` is not provided by the parent component..
    if (updateScore === undefined) {
      throw new Error('Failed to inject "updateScore"');
    }

    const checkAnswer = (val: string) => {

      // ...

      // The error is gone
      updateScore({ 
        points: Math.floor(Math.random() * 100),
      });
    };

    // ...
  },
});
</script>

此处提供的工作示例：codesandbox.io/s/so-provide-inject

于 2021-06-27T21:57:10.550 回答