What does the exclamation mark stands for on Vue Property Decorator

Question

I am getting familiar with the use of typescript in vue. When reading the documentation of vue property decorator I cannot get what this declaration stands for

@Prop({ default: 'default value' }) readonly propB!: string

Answer 1

In this specific case, the bang operator is used because you know that your property propB cannot be null or undefined as the decorator takes care of filling in a value. TypeScript does not know this and since you are not assigning a value directly or in the constructor, it expects the type signature to be string | undefined. The exlamation mark tells TypeScript that you know the value will never be undefined and reduces the signature to string only without complaining about the possibility of it being undefined.

You only need this if you set the TypeScript compiler option to strict (this is strongly encouraged!).