When merging multiple prop definitions using Object.assign in defineProps, Vue props can be made optional

Question

When merging multiple prop definitions using Object.assign in defineProps, Vue props can be made optional

I have defined a const called MODAL_OPTION_PROP to set common props for a modal:

export const MODAL_OPTION_PROP = {
  modalOption: {
    type: Object as PropType<ModalOptionParams>,
    default: DEFAULT_MODAL_OPTION,
  },
};

I am trying to use it in a modal component with defineProps

const props = defineProps(
  Object.assign({}, MODAL_OPTION_PROP, {
    currentItem: {
      type: Object as PropType<Item>,
      required: true,
    },
  })
);

const editingItem = ref<Item>(props.currentItem);

However, I am getting a not assignable warning on props.currentItem:

(property) currentItem?: Item | undefined
Argument of type 'Item | undefined' is not assignable to parameter of type 'Item'.
  Type 'undefined' is not assignable to type 'Item'.ts(2345)

It seems like currentItem is becoming optional. Is there a way to prevent this unexpected behavior?

typescript vue.js vue-props

Answer 1

Answer №1

In my previous response, I suggested using the spread operator instead of Object.assign.

const properties = defineProps(
  {
    ...MODAL_SETTINGS_PROP,
    selectedOption: {
      type: Object as PropType<Setting>,
      required: true,
    },
  }
)

Although I'm not entirely certain about the distinction, it seems that defineProps functions more like a macro rather than a regular function. This could be why it struggles with parsing complex expressions such as Object.assign.

Answer 2

In my previous response, I suggested using the spread operator instead of Object.assign.

const properties = defineProps(
  {
    ...MODAL_SETTINGS_PROP,
    selectedOption: {
      type: Object as PropType<Setting>,
      required: true,
    },
  }
)

Although I'm not entirely certain about the distinction, it seems that defineProps functions more like a macro rather than a regular function. This could be why it struggles with parsing complex expressions such as Object.assign.

Answer 3

Answer №2

A more streamlined approach would be:

const properties = generateProperties(
  defineProps<{
    modalSettings?: ModalConfiguration;
    selectedObject: Object;
  }>(),
  {
    modalSettings: DEFAULT_MODAL_SETTINGS,
  }
);

const editedObject = reference(properties.selectedObject);

Avoiding the use of Object.assign altogether.

Answer 4

A more streamlined approach would be:

const properties = generateProperties(
  defineProps<{
    modalSettings?: ModalConfiguration;
    selectedObject: Object;
  }>(),
  {
    modalSettings: DEFAULT_MODAL_SETTINGS,
  }
);

const editedObject = reference(properties.selectedObject);

Avoiding the use of Object.assign altogether.

When merging multiple prop definitions using Object.assign in defineProps, Vue props can be made optional

Answer №1

Answer №2

Similar questions

In Typescript, you can extend an interface with the Node type to specifically

What is the best way to get my Discord bot to respond in "Embed" format using TypeScript?

Incorporating an external SVG file into an Angular project and enhancing a particular SVG element within the SVG with an Angular Material Tooltip, all from a TypeScript file

Removing all text inside an input field with Vue

Errors are not displayed or validated when a FormControl is disabled in Angular 4

Using Vue.js to filter a list based on index matches

Limit an object to only contain interface properties

Retrieving array-like form data in a TypeScript file

(no longer supported) We are unsure about the usage of /deep/, >>>, and ::ng-deep, ::v-deep

Is it possible to evaluate a conditional in Angular after retrieving values from a subscription in an observable?

"Once the queryParams have been updated, the ActivatedRoute.queryParams event is triggered once

Navigate to a different directory within Cypress by utilizing the cy.exec() function

Incorporating a CSS Module into a conditional statement

Vue select component not refreshing the selected option when the v-model value is updated

Utilizing Firebase objects across multiple files: A comprehensive guide

Attempting to increase information through a function

Information obtained from the visible is consistently indefinable

Tips for incorporating asynchronous page components as a child element in next.js?

Utilize Page.evaluate() to send multiple arguments

Troubleshooting problems with dynamic imported asset URLs in Vue and Vitest snapshot snapshots