@（at 符号）在 TypeScript/Vue 中意味着什么

Question

我开始从事 VueJS 项目，并且发现了一种奇怪的语法。我在下面用注释标记了这些行。

文件（示例）：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
//...

在这种情况下这个“@”的意义是什么？

Answer 1

在TypeScript（以及ECMAScript）中，

@

标志表示装饰器。在 TypeScript 中，它是语言的一部分，在 ECMAScript 中，它仍然是第 3 阶段提案。

一个装饰器，顾名思义，装饰它所应用到的语言元素。可以修饰的语言元素有 classes、methods、accessors、properties 和 parameters。

注意：参数装饰器是 TypeScript 独有的功能，它们不存在于 ECMAScript 提案中。反之亦然，ECMAScript 提案添加了一个名为 class auto accessors 的新类语法元素及其装饰器，而 TypeScript 中不存在类自动访问器。

装饰器本质上是一种函数，它将要装饰的语法元素的描述作为参数，并且可以选择返回该语法元素的修改版本。

在这种情况下，根据命名，听起来装饰器正在将其应用的字段变成 getter。