Search code examples
stenciljs

Stencil Web Components optional/required property

In Stencil web component there are different property annotations: regular one:

@Prop() name;

optional:

@Prop() name?;

required:

@Prop() name!;

If there exist an explicit annotation for optional and required property, what is the requirement for regular one? If it's required - what's the purpose of using the '!' annotation in other case? If optional - what's the purpose of using the '?' annotation in other case?

Solution

  • According to Stencil documentation the required and optional annotations actually serve dissimilar purposes.

    The "required" annotation will cause an error to be shown if the component is used without the property in other TSX.

    When using the "optional" annotation, "Stencil will try to infer the type of the prop if a type is not explicitly given."

    Therefore - presumably - when using no annotation, neither action will be taken.