Validity of Vue 3 Typescript properties checked during compilation and runtime

Question

Validity of Vue 3 Typescript properties checked during compilation and runtime

We are currently developing a Vue 3 component library, and as the project grows in scale, we have refactored it with TypeScript to improve the development experience. However, we are facing a challenge. Our library is being used by teams in different environments, some with TypeScript and bundler setups, and others without. This means that for almost every component, we need to validate prop types both at compile-time and runtime.

props: {
  someProp: {
    type: String as PropType<'enum1' | 'enum2' | 'enum3'>,
    validator: (v: string) => {
      return ['enum1', 'enum2', 'enum3'].includes(v)
    }
  }
}

While the code is functional and beneficial for both TypeScript and JavaScript teams, as it provides code completion and error detection capabilities, we are not satisfied with the duplication of code. Despite <'enum1' | ...> being a type definition and ['enum1', ...] being an array, they essentially contain the same information but are written repeatedly.

Is there a way to streamline the process and define props with PropType and validator without unnecessary repetition?

typescript vue.js vuejs3

Answer 1

Answer №1

At the moment, my current approach looks something like this:

export const createProperty = <
  T = any,
  R extends boolean = boolean,
  D extends T = T
>({
  type?: any,
  /* defining allowable values for this property */
  values?: readonly T[],
  required?: R,
  /* a required property cannot have a default value */
  /* a default value cannot be set for a required property */
  defaultValue?: R extends true
    ? never
    : D extends Record<string, unknown> | Array<any>
      ? () => D
      : D,
  /* additional validation rules */
  validator?: (val: any) => boolean
} = {}) => {
  return {
    type: type as PropType<T | never>,
    required: !!required,
    default: defaultValue,
    validator: (val: any) => {
      let valid = false

      // checking if the property value is within the defined values array
      // or matches the default value
      if (values) {
        valid =|| [...values, defaultValue].includes(val)
      }
      if (validator) {
        valid =|| validator(val)
      }

      return valid
    }
  }
}

Consequently,

someProperty: createProperty({
  type: String,
  values: ['enum1', 'enum2', 'enum3']
})

will result in

someProperty: {
  type: String as PropType<'enum1' | 'enum2' | 'enum3'>,
  validator: (val) => {
    return ['enum1', 'enum2', 'enum3'].includes(val)
  }
}

if (props.someProperty === 'illegalValue') {
  // ERR: will always return false as 'enum1' | 'enum2' | 'enum3' is not equal to 'illegalValue'
}

Answer 2

At the moment, my current approach looks something like this:

export const createProperty = <
  T = any,
  R extends boolean = boolean,
  D extends T = T
>({
  type?: any,
  /* defining allowable values for this property */
  values?: readonly T[],
  required?: R,
  /* a required property cannot have a default value */
  /* a default value cannot be set for a required property */
  defaultValue?: R extends true
    ? never
    : D extends Record<string, unknown> | Array<any>
      ? () => D
      : D,
  /* additional validation rules */
  validator?: (val: any) => boolean
} = {}) => {
  return {
    type: type as PropType<T | never>,
    required: !!required,
    default: defaultValue,
    validator: (val: any) => {
      let valid = false

      // checking if the property value is within the defined values array
      // or matches the default value
      if (values) {
        valid =|| [...values, defaultValue].includes(val)
      }
      if (validator) {
        valid =|| validator(val)
      }

      return valid
    }
  }
}

Consequently,

someProperty: createProperty({
  type: String,
  values: ['enum1', 'enum2', 'enum3']
})

will result in

someProperty: {
  type: String as PropType<'enum1' | 'enum2' | 'enum3'>,
  validator: (val) => {
    return ['enum1', 'enum2', 'enum3'].includes(val)
  }
}

if (props.someProperty === 'illegalValue') {
  // ERR: will always return false as 'enum1' | 'enum2' | 'enum3' is not equal to 'illegalValue'
}

Validity of Vue 3 Typescript properties checked during compilation and runtime

Answer №1

Similar questions

What is the significance of including parameter names in Typescript function type signatures?

Typescript - Conditional imports

Using Next.JS useRouter to access a dynamic route will result in receiving an empty object as the return value

TS1316 Error: You can only have global module exports at the top level of the file

The issue of resolving custom paths imports in Typescript has been a persistent challenge for developers

Beautiful ExpressionChangedAfterItHasBeenCheckedError

Encountering a 404 Not Found error upon refreshing a page in Vue JS

TypeScript and Redux mapDispatchToProps are not in sync

Here is a unique rewrite: "Strategies for accessing interface-defined fields instead of mongoose schema-defined fields

Tips for streamlining code using switch statements in vue.js

Updating components reactively in Vue.js when a click event occurs

There was an issue with the Vuejs Router that prevented the property '$emit' from being read due to a TypeError because

Converting lengthy timestamp for year extraction in TypeScript

Tips for specifying a variable as a mandatory key attribute within an array

When a custom icon is clicked in the vue-select dropdown, the custom method is not activated

What is the proper type for an object and an array of strings?

One effective way to utilize await/async within the Vue mounted lifecycle hook is by

The history mode router in Vue disrupts the dynamic URL hashing

Include a scrollbar within a Bootstrap table grid under a div with a width of 12 columns

Update the field 'payments._id' in MongoDB to a timestamp