what do the @ (at sign) means in TypeScript/Vue

Issue

I'm starting to work on a VueJS project, and I'm discovering a strange syntax. I've marked the lines with comments below.

file(example) : MyModule.vue

const storeCompte = namespace("compte") // namespace is based on 'node_modules\vuex-class\lib\bindings.d.ts'
const storeEvenements = namespace("evenements")

@Component({  // <== ok the @ here is for the decorator 
  components: {
....
.... // some code

export default class PageAgenda extends BasePage {
  @storeCompte.Getter loggedIn!: boolean// <== but what is this @ doing here ?

  @storeRegions.Getter nomRegion!: string  // <== and here ?
  @storeRegions.Getter regionInstance?: Region // <== here too ?
  @storeRegions.Getter listeRegions!: Array<Region>// <== what ?

  public filterMobile = false
  public otherFiltres: EventParams

  mounted(): void {
    // some code
  }

//... the code continues
//...

what is the significance of this '@' in this context?

Solution

In TypeScript (and ECMAScript as well), the @ sigil signifies a decorator. In TypeScript, it is part of the language, in ECMAScript, it is still a Stage 3 proposal.

A decorator, as the name implies, decorates the language element it is applied to. The language elements that can be decorated are classes, methods, accessors, properties, and parameters.

Note: parameter decorators are a TypeScript-only feature, they are not present in the ECMAScript proposal. Vice-versa, the ECMAScript proposal adds a new class syntax element called class auto accessors and decorators for it, whereas class auto accessors do not exist in TypeScript.

Decorators are, essentially, functions that take a description of the syntax element to be decorated as an argument and can choose to return a modified version of that syntax element.

In this case, based on the naming, it sounds like the decorator is turning the field it is applied to into a getter.

Answered By - Jörg W Mittag