Prevent null prop value in Vue 3.X

Defining the optional prop, although we may want to unify the undefined and null to something one, user can pass any of undefined or null.

If user will specify null, Vue will not emit any warnings because Vue considers the null as optional value:

// === vue-facing-decorators version
import {
  ComponentBase as VueComponentConfiguration,
  Vue as VueComponent,
  Prop as VueProperty,
} from "vue-facing-decorator";

@VueComponentConfiguration({ name: "Button" })
class Button extends VueComponent {

  @VueProperty({ type: String })
  protected readonly label?: string | null;

}
 
// === Vue options API version
export default {
  props: {
    label: {
      type: String,
      required: false
    }
  }
};

The isNonEmptyString will not prevent the null because Vue will recognize the null as omitted property and will not execute the validator:

import { isNonEmptyString } from "@yamato-daiwa/es-extensions";


// === vue-facing-decorators version
@VueComponentConfiguration({ name: "Button" })
class Button extends VueComponent {

  @VueProperty({ validator: isNonEmptyString })
  protected readonly label?: string | null;

}


// === Vue options API version
export default {
  props: {
    label: {
      validator: isNonEmptyString,
      required: false
    }
  }
};

But if Vue considers the null as omitted property, why it does not substitute it when default specified?!

import { isNonEmptyString } from "@yamato-daiwa/es-extensions";


// === vue-facing-decorators version
@VueComponentConfiguration({ name: "Button" })
class Button extends VueComponent {

  @VueProperty({ type: [ String, Array ], default: (): ReadonlyArray<string> => [] })
  protected readonly mainSlotWrapperAdditionalCSS_Classes!: ReadonlyArray<string> | string | null;


}

// === Vue options API version
export default {
  props: {
    mainSlotWrapperAdditionalCSS_Classes: {
      type: [String, Array],
      default: () => []
    }
  }
};

So, no way to prevent the null? We need to check each optional prop for both undefined and null or write the computed for these props? Too many routines for 202Xs, I want something more cleaner but doing all of this works.

You should use the TypeScript!!!

I am using, but TypeScirpt is NOT the solution of this problem because it works before executing of the script while Vue’s validation at the time of script execution. Same about React’s prop-types which has been deprecated as if TypeScript will validate props during the script execution instead.

The checking of the props during the script execution is important because:

1. Component user could use JavaScript instead of TypeScript
2. I know that in average company the development is executed chaotically with tens of TypeScript errors, even the notification of TypeScript has not been set well.