TypeScript – Decorator Metadata

前言

在 TypeScript – Decorator 装饰器 里，我有提到 TypeScript 只实现了 decorate 的特性，把 metadata 的特性独立了出来。

本来我以为还需要等待很长的时间他们才会实现，没想到 v5.2 既然推出了。哎哟，不错哦！

声明: Decorator 不是 TypeScript 语法，它是 ECMAScript (AKA JavaScript) 标准。Metadata 也是，目前是 stage 3。

 

参考

Docs – Announcing TypeScript 5.2

 

什么是 Decorator Metadata?

Decorator Metadata 类似于 C# 的 Attribute。就是在 class 属性上写标签（简单说就是记入一些资料）。然后通过反射获取到这些资料并且使用它们。

通常我们用它来实现 Metaprogramming。

 

搭建环境

和上一篇的 Disposable 做法类似。

必须使用 TypeScript Compiler (AKA tsc)，esbuild 还不支持 Decorator。

tsconfig.json 加上 compilerOptions.lib "ESNext.Decorators"

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": [
      "ES2017",
      "ESNext.Decorators",
      "DOM"
    ],
  }
}

再加上 runtime polyfill

(Symbol as { metadata: symbol }).metadata ??= Symbol("Symbol.metadata");

 

使用方式

定义 decorator function

function setMetadata(_target: unknown, context: ClassMemberDecoratorContext) {
  context.metadata[context.name] = true;
}

metadata 这个属性是新的。之前的 Decorator 没有。

apply to class member

class Person {
  @setMetadata
  firstName = 'Derrick';
}

反射

console.log(JSON.stringify(Person[Symbol.metadata])); // {"firstName":true}

简单明了。

 

实战场景

TODO future... 等以后有用上了，再补。