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

Integrate Tailwind CSS into the bundled JavaScript file

Enhancing external TypeScript modules

What is the best way to restrict navigation for a subroute in Vue.js?

Is there a way to access and read an Excel file stored within the assets folder using Angular?

Concealing the TinyMce Toolbar upon initialization

What is the best way to represent the concept of "having at least one existing property and not having any additional properties" using a mapped type?

Is it possible to utilize a slot within a Vue.js loop?

Guide on adding checkboxes for each child component in a Vue ads table

Refresh the page when the parameter in the URL changes

Using the Trigger Method in a Vue JS Component with Sibling Components

Accessing the "this" object in Vue.js components

What is TS's method of interpreting the intersection between types that have the same named function properties but different signatures (resulting in an error when done

The object literal can only define properties that are already known, and 'data' is not found in the type 'PromiseLike<T>'

Enhance the appearance of a custom checkbox component in Angular

What is the best way to convert Arabic language HTML into a PDF document on the client side?

Tips for invoking an Android function from an AngularJS directive?

Having trouble installing dependencies in a React project with TypeScript due to conflicts

Could it be possible for TypeScript inference to directly infer the value and omit the key in the process?

Fetching Results from Promise

Exploring Typescript for Efficient Data Fetching