What is the proper way to enhance properties?

Question

What is the proper way to enhance properties?

In the process of developing a Vue3 app using Typescript, one of the components is designed to receive data through props. Initially, everything functioned smoothly with the basic setup:

   props: {
     when: String,
     data: Object
   },

However, I decided to enhance the props by incorporating default values, validators, and more:

  props: {
    when: {
      type: String,
      default: '',
      validator(value: string) {
        return ['today', 'tomorrow', 'later'].includes(value)
      },
      required: true
    },
    data: {
      type: Object,
      default() {
        return {}
      },
      required: true
    },
  },

Subsequently, TypeScript started flagging issues within the setup() function that are puzzling to me:

TS2345: Argument of type '"data"' is not assignable to parameter of type 'string & ((number | unique symbol | "length" | "toString" | "toLocaleString" | "concat" | "join" | "slice" | "indexOf" | "lastIndexOf" | "every" | "some" | "forEach" | "map" | ... 29 more ... | ((searchElement: never, fromIndex?: number | undefined) => boolean)) & string)'.

pertaining to the line:

let allEvents = toRef(props, 'data')

TS2339: Property 'when' does not exist on type 'Readonly<LooseRequired<Readonly<readonly unknown[] & { [x: number]: string; } & { [iterator]?: IterableIterator<string> | undefined; length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; ... 17 more ...; includes?: ((searchElement: string, fromIndex?: number | undefined) =>...'.

related to the code:

  if (props.when === 'today') {
    // ...
  }

There are additional errors, but resolving them seems feasible once I identify the root cause.

typescript vue.js vuejs3

Answer 1

Answer №1

There is a similarity in the issue at hand with another question where only the validator property was a regular function as discussed on Stack Overflow. In this case, both validator and default are regular functions (in different props), causing a breakdown in type inference for the props argument within setup(). I'm currently exploring the root problem through an open discussion on Stack Overflow.

An intriguing finding from your code snippet reveals a peculiar type representation for the props argument within setup(), resembling an intersection of keys of type string:

(parameter) props: Readonly<LooseRequired<Readonly<readonly unknown[] & {
    [x: number]: string;
} & {
    [Symbol.iterator]?: IterableIterator<string> | undefined;
    length?: number | undefined;
    toString?: string | undefined;
    toLocaleString?: string | undefined;
    ... 19 more ...;
    flat?: unknown[] | undefined;
}> | Readonly<...>>>

Solution

A workaround has been identified - replacing regular functions with arrow functions (where functions are required) in all props declarations:

export default defineComponent({
  props: {
    when: {
      type: String,
      default: '',

      //validator(value: string) {
      //  return ['today', 'tomorrow', 'later'].includes(value)
      //},
      validator: (value: string) => ['today', 'tomorrow', 'later'].includes(value), // ✅

      required: true
    },
    data: {
      type: Object,

      //default() {
      //  return {}
      //},
      default: () => ({}), // ✅

      required: true
    },
  },
})

This change results in a more structured type representation for the props argument:

(parameter) props: Readonly<LooseRequired<Readonly<{
    msg?: unknown;
    when?: unknown;
    data?: unknown;
} & {
    when: string;
    data: Record<string, any>;
} & {
    msg?: string | undefined;
}>>>

For demonstration purposes, check out the GitHub demo.

Answer 2

There is a similarity in the issue at hand with another question where only the validator property was a regular function as discussed on Stack Overflow. In this case, both validator and default are regular functions (in different props), causing a breakdown in type inference for the props argument within setup(). I'm currently exploring the root problem through an open discussion on Stack Overflow.

An intriguing finding from your code snippet reveals a peculiar type representation for the props argument within setup(), resembling an intersection of keys of type string:

(parameter) props: Readonly<LooseRequired<Readonly<readonly unknown[] & {
    [x: number]: string;
} & {
    [Symbol.iterator]?: IterableIterator<string> | undefined;
    length?: number | undefined;
    toString?: string | undefined;
    toLocaleString?: string | undefined;
    ... 19 more ...;
    flat?: unknown[] | undefined;
}> | Readonly<...>>>

Solution

A workaround has been identified - replacing regular functions with arrow functions (where functions are required) in all props declarations:

export default defineComponent({
  props: {
    when: {
      type: String,
      default: '',

      //validator(value: string) {
      //  return ['today', 'tomorrow', 'later'].includes(value)
      //},
      validator: (value: string) => ['today', 'tomorrow', 'later'].includes(value), // ✅

      required: true
    },
    data: {
      type: Object,

      //default() {
      //  return {}
      //},
      default: () => ({}), // ✅

      required: true
    },
  },
})

This change results in a more structured type representation for the props argument:

(parameter) props: Readonly<LooseRequired<Readonly<{
    msg?: unknown;
    when?: unknown;
    data?: unknown;
} & {
    when: string;
    data: Record<string, any>;
} & {
    msg?: string | undefined;
}>>>

For demonstration purposes, check out the GitHub demo.

Answer 3

Answer №2

It is recommended that the validator be implemented as an arrow function:

when: {
  type: String,
  default: '',
  validator:(value:string)=>(['today', 'tomorrow', 'later'].includes(value)),
  required:true
 },

Answer 4

It is recommended that the validator be implemented as an arrow function:

when: {
  type: String,
  default: '',
  validator:(value:string)=>(['today', 'tomorrow', 'later'].includes(value)),
  required:true
 },

What is the proper way to enhance properties?

Answer №1

Solution

Answer №2

Similar questions

Vue: updating the :root CSS variable for a child component leads to an error - TypeError: Unable to access properties of undefined (reading 'style')

Unable to view the refreshed DOM within the specifications after it has been altered

The scale configuration for scale: x is not valid for creating a time scale chart using chart.js

Discovering the world of Promises in TypeScript and understanding how to return specific types

Issue with locating assets in Angular 6 build

Setting up ReactJS and TypeScript in a fresh MVC5 project from scratch

Mockery Madness - Exploring the art of mocking a function post-testing a route

Problem with z-index in VueJS: Child div z-index not functioning within v-dialog

Is there a way to obtain the component code prior to compiling in Vue2.x?

How can we avoid duplicating injectors in a child class when extending a class that already has injected services?

Looping through dynamic image sources using v-for

The ReactDOM.createPortal modal has been successfully mounted onto the DOM, however, there seems to be no visible content

Exploring the functionalities of class methods within an Angular export function

What's the best way to undo a CSS transition animation when deleting an active class?

Next.js TypeScript project encountered an issue: "An error occured: 'TypeError: Cannot read property 'toLowerCase' of undefined'"

checkbox with an option tag

Creating packages for multiple Typescript projects that rely on a shared local module

Execute the function only in response to changes in the data

The Nuxt.js landing page is having trouble loading, but all other components are functioning perfectly

Triggering events in vue-router