Nuxt•5mo ago

Argument of type '{}' is not assignable to parameter of type

At the risk of looking really foolish, why the heck is vue-tsc saying it can't assign a literal number to this? There's a component right above it that appears to do the same thing and it doesn't complain about that one

          <PanelsNetworkStatsListPanel
            :foobar="1"
            vertical
            class="flex-grow-1"
          />

          <PanelsNetworkStatsListPanel
            :foobar="1"
            vertical
            class="flex-grow-1"
          />

<template>
  <div class="d-flex flex-wrap ga-3 justify-space-between">
    <ContainmentPanel
      v-for="panel in panelList"
      :key="panel.label"
      class="score flex-grow-1"
    >
      <template #panel-body>
        <div class="d-flex align-center ga-2">
          <CustomSvg
            :filename="panel.icon"
            :class="{ 'flip-180': panel.reverseIcon }"
          />
          <div class="d-flex flex-column ga-2">
            <div class="ga-3 align-end">
              <p class="score-heading font-weight-light">{{ panel.stat }}</p>
              <p class="text-caption">{{ panel.unitOfMeasurement }}</p>
            </div>
            <p class="text-body font-weight-bold text-capitalize">
              {{ panel.label }}
            </p>
          </div>
        </div>
      </template>
    </ContainmentPanel>
  </div>
</template>
<script setup lang="ts">
const panelList = ref([
  {
    stat: "400,000",
    unitOfMeasurement: "bytes per day",
    label: "Total Communication",
    icon: "compare_arrows",
  },
  {
    stat: "250,000",
    unitOfMeasurement: "bytes per day",
    label: "Outbound Communication",
    icon: "bubble",
  },
  {
    stat: "250,000",
    unitOfMeasurement: "bytes per day",
    icon: "bubble",
    reverseIcon: true,
    label: "Inbound Communication",
  },
])

const props = defineProps({
  foobar: {
    type: Number,
    required: true,
  },
})
</script>

<style lang="scss" scoped>
@import "~/assets/styles/score.css";
</style>

<template>
  <div class="d-flex flex-wrap ga-3 justify-space-between">
    <ContainmentPanel
      v-for="panel in panelList"
      :key="panel.label"
      class="score flex-grow-1"
    >
      <template #panel-body>
        <div class="d-flex align-center ga-2">
          <CustomSvg
            :filename="panel.icon"
            :class="{ 'flip-180': panel.reverseIcon }"
          />
          <div class="d-flex flex-column ga-2">
            <div class="ga-3 align-end">
              <p class="score-heading font-weight-light">{{ panel.stat }}</p>
              <p class="text-caption">{{ panel.unitOfMeasurement }}</p>
            </div>
            <p class="text-body font-weight-bold text-capitalize">
              {{ panel.label }}
            </p>
          </div>
        </div>
      </template>
    </ContainmentPanel>
  </div>
</template>
<script setup lang="ts">
const panelList = ref([
  {
    stat: "400,000",
    unitOfMeasurement: "bytes per day",
    label: "Total Communication",
    icon: "compare_arrows",
  },
  {
    stat: "250,000",
    unitOfMeasurement: "bytes per day",
    label: "Outbound Communication",
    icon: "bubble",
  },
  {
    stat: "250,000",
    unitOfMeasurement: "bytes per day",
    icon: "bubble",
    reverseIcon: true,
    label: "Inbound Communication",
  },
])

const props = defineProps({
  foobar: {
    type: Number,
    required: true,
  },
})
</script>

<style lang="scss" scoped>
@import "~/assets/styles/score.css";
</style>

 [vue-tsc] Argument of type '{}' is not assignable to parameter of type 'Partial<{}> & Omit<{ readonly foobar: number; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never> & Record<...>'. Property 'foobar' is missing in type '{}' but required in type 'Omit<{ readonly foobar: number; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<ExtractPropTypes<{ foobar: { type: NumberConstructor; required: true; }; }>>, never>'.

 [vue-tsc] Argument of type '{}' is not assignable to parameter of type 'Partial<{}> & Omit<{ readonly foobar: number; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...>, never> & Record<...>'. Property 'foobar' is missing in type '{}' but required in type 'Omit<{ readonly foobar: number; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<ExtractPropTypes<{ foobar: { type: NumberConstructor; required: true; }; }>>, never>'.

3 Replies

oneeach•5mo ago

are you calling the component PanelsNetworkStatsListPanel anywhere without specitying the prop foobar? also, which vue extention are you using in VSCode?

benwisOP•5mo ago

Vue - Official Turns out yes, adding it to the other call fixes things Thank you for pointing that out

oneeach•5mo ago

that is because you have it set to required in the prop. If you want to make that optional, set required to false.

Gaming

Programming

Argument of type '{}' is not assignable to parameter of type