特定类型阵列支柱的数组方法抛出错误

Question

我在组件的道具中有这样一个阵列道具

props: {
  datasetsList: {
    type: Array as PropType<Array<ParallelDataset>>,
    required: false
  }
},

然后，在我的setup()方法中，我有一个类似于

const selectDataset = (radioValue: number) => {
  setCustomDataSet(props.datasetsList.find(dataset => dataset.id === Number(radioValue)));
}

上面的代码在.find()部分上给出了以下错误

Property 'find' does not exist on type 'unknown'.Vetur(2339)

如果我现在改变这部分

props.datasetsList.find()

到这个

(props.datasetsList as Array<ParallelDataset>).find()

错误消失了。

这是否意味着我定义阵列道具的方式是错误的？或者是别的什么东西？我正在使用最新的es版本。

编辑：

组件的完整代码：

<template>
  <div class="datasets-listing xs:mb-14 sm:mb-8 w-full">
    <div class="grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-5 gap-y-5 mb-16">
      <div class="w-12/12 custom-dataset rounded" v-for="dataset in datasetsList" :key="dataset.id">
        <FormRadio
          :id="dataset.name"
          :value="dataset.id"
          :v-model="radioVmodel"
          :isInputHidden="true"
          class="rounded border"
          :class="radioVmodel == dataset.id ? 'selected-dataset border-blue-700' : 'default-dataset border-gray-300'"
          @change="selectDataset">
          <template v-slot:radio-label>
            <ParallelDatasetCard 
              :dataset="dataset"/>
          </template>
        </FormRadio>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from "vue";
import Tag from "@/components/Tag.vue";
import ParallelDatasetCard from "@/components/ParallelDatasetCard.vue";
import FormRadio from "@/components/form-elements/FormRadio.vue";
import { ref } from "@vue/composition-api";
import Button from "@/components/Button.vue";
import Translate  from "@/services/TranslationService";
import { ParallelDataset } from "@/models/models";

export default Vue.extend({
  name: "DatasetsListing",
  props: {
    datasetsList: {
      type: Array as PropType<Array<ParallelDataset>>,
      required: false
    }
  },
  setup(props, context) {
    const { setCustomDataSet, getCustomDataset } = Translate();
    const pickedDataset = getCustomDataset;
    const radioVmodel = ref(String(pickedDataset.value.id));

    const selectDataset = (radioValue: number) => {
      radioVmodel.value = String(radioValue);
      setCustomDataSet(props.datasetsList.find(dataset => dataset.id === Number(radioValue)));
    }

    return {
      radioVmodel: radioVmodel,
      pickedDataset: pickedDataset,
      selectDataset: selectDataset
    }
  },
  components: {
    Tag,
    Button,
    FormRadio,
    ParallelDatasetCard
  }
})
</script>

<style lang="scss" scoped>
.datasets-listing {
  .custom-dataset {
    transition: .2s all ease-in-out;

    &:hover {
      box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    }
  }
  .selected-dataset {
    box-shadow: 0px 0px 3px 0px #2da4df;
  }
}
</style>

Answer 1

要获得类型推断，您应该使用defineComponent助手创建组件：

import {defineComponent,.....} from 'vue'

export default defineComponent({
    props: {
     ......
    },
    setup(props) {
            // Stuff
        }
});