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:
- Component user could use JavaScript instead of TypeScript
- 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.