Question

我有一个叫做Anomalie的类型，定义为

type AnomalieStatus = "RUNNING" | "CANCELLED";
type Anomalie = {
  id: string;
  status: AnomalieStatus;
}

然后，我有一个VueJS组件，该组件将列出所有异常并让我的用户将其过滤为：

Vue.extend({
  props: {
    anomaliesFilters: {
      type: Object as () => AnomaliesFilters,
      required: false,
      default: () => ({})
    }
  },
  data() {
    showExtendedFilters: false,
  }
})

我的目标是对打字稿说：“如果开发人员要指定anomaliesFilters对象，则该对象的键必须是Anomalie类型之一，并且其值必须与Anomalie中定义的相同”

我暂时将其定义为：

type AnomaliesFilters = {
  [key in keyof Anomalie]: any
}

但是问题是打字稿在这种情况下会向我抛出一个错误Property 'showExtendedFilters' does not exist on type 'Vue'，这让我认为我的打字在Vue定义上不起作用：/

另外，我不想在AnomaliesFilters中使用类型any，并指定该值必须与Anomalie类型相同，但是我不知道该怎么做。

已解决： 我终于解决了我的问题。

使用Object as () => AnomaliesFilters并非根本原因。实际上，我在使用default: () => ({})，它为道具定义了默认值。 Typescript编译器引发了混乱的错误消息。要解决此错误，我需要将默认返回的类型定义为(): AnomaliesFilters => ({})。现在错误消失了。

此外，为了解决我对映射类型缺乏的知识，我在Vue的定义中进行了搜索，并找到了导出的名为RecordPropsDefinition的类型。所以现在AnomaliesFilters就像：

type AnomaliesFilters = {
  [K in keyof Anomalie]: Anomalie[K]
}

我如何定义一个映射类型，它将使用其他类型的键来定义道具。输入VueJS吗？

0 个答案: