Piszę aplikację we Vue.js. Mam następujący element:

          <v-col cols="5">
            <v2-number-text-field
              v-model="bonusConfig.deferralMonths"
              label="Miesiące"
              :rules="rules.NonNegativeNumber"
              :readonly="readonly"
              type="number"
              min=0
              @input="onBonusConfigChange" />
          </v-col>

Wykorzystuje on komponent v2-number-text-field

/// v2-number-text-field.vue

<template>
  <v-text-field
    v-model.number="model"
    :label="label"
    outlined
    :dense="dense"
    :clearable="!readonly && clearable"
    :prepend-icon="prependIcon"
    :rules="computedRules"
    :filled="readonly"
    autocomplete="off"
    :placeholder="placeholder"
    :hide-details="hideDetails || rules.length === 0"
    :readonly="readonly"
    type="number"
    :suffix="suffix"
    :min="min"
    :max="max" />
</template>
<script lang="ts">
import ModelConstants from "@/compatibility-layer/model-constants";
import { optionalNumberProp } from "@/compatibility-layer/model-prop";
import { useOptionalStringModel } from "@/compatibility-layer/primitive-model";
import { RulesUtils } from "@/lib/rules-utils";
import { computed, defineComponent } from "@vue/composition-api";

const V2NumberTextField = defineComponent({
  props: {
    ...optionalNumberProp(),

    label: {
      type: String,
      required: false,
      default: null
    },
    placeholder: {
      type: String,
      required: false,
      default: null
    },

    rules: {
      type: Array,
      required: false,
      default: () => []
    },
    prependIcon: {
      type: String,
      required: false,
      default: undefined
    },

    clearable: {
      type: Boolean,
      required: false,
      default: false
    },
    required: {
      type: Boolean,
      required: false,
      default: false
    },
    dense: {
      type: Boolean,
      required: false,
      default: true
    },
    hideDetails: {
      type: Boolean,
      required: false,
      default: true
    },
    suffix: {
      type: String,
      required: false,
      default: undefined
    },
    min: {
      type: Number,
      required: false,
      default: undefined
    },
    max: {
      type: Number,
      required: false,
      default: undefined
    }
  },

  emits: [ModelConstants.modelEvent],

  setup(props, context) {
    const model = useOptionalStringModel(props, context);

    const computedRules = computed(() => {
      if (props.readonly) return [];
      const list = RulesUtils.IntegerNumber() as any[];
      if (props.required) list.push(...RulesUtils.NonNullNumber());
      if (props.min || props.min === 0) list.push(...RulesUtils.MinNumber(props.min));
      if (props.max || props.max === 0) list.push(...RulesUtils.MaxNumber(props.max));
      return [...list, ...props.rules];
    });

    return { model, computedRules };
  }
});

export default V2NumberTextField;
</script>

Pomimo tego, iż atrybut min jest definiowany w v2-number-text-field jako number otrzymuje następującą uwagę w Visual Studio Code. Jak to naprawić?

/// UWAGA W VISUAL STUDIO CODE

Type 'string' is not assignable to type 'number'.ts-plugin(2322)
v2-number-text-field.vue(78, 5): The expected type comes from property 'min' which is declared here on type 'Readonly<Partial<{ label: string; placeholder: string; rules: unknown[]; prependIcon: string; clearable: boolean; required: boolean; dense: boolean; hideDetails: boolean; suffix: string; min: number; max: number; value: number | null; readonly: boolean; }> & Omit<...>> & Record<...>'
(property) min?: number | undefined