typescript-plugin-mark-fields

TypeScript transformer 插件。编译期自动在每个 class 头部插入 static {} 块，将实例字段显式标记到 prototype 上，使运行时代码能在实例化之前感知类有哪些字段。

快速预览

输入：

const TAG = 'tag';

class Animal {
  static count = 0;
  name;
  type = 'dog';
  [TAG];
  legs = 4;
}

输出：

const TAG = 'tag';

class Animal {
  static {
    this.prototype.name = undefined;
    this.prototype.type = undefined;
    this.prototype[TAG] = undefined;
    this.prototype.legs = undefined;
  }
  static count = 0;
  name;
  type = 'dog';
  [TAG];
  legs = 4;
}

static {} 中的 this 指向类自身，无论具名类还是匿名类表达式均有效。

处理规则

| 字段类型 | 示例 | 处理 | |---------|------|:---:| | 普通标识符字段 | name | ✅ this.prototype.name = undefined | | 带初始值的字段 | type = "dog" | ✅ this.prototype.type = undefined | | 计算属性名 | [TAG] | ✅ this.prototype[TAG] = undefined | | 字符串字面量 key | "my-field" | ✅ this.prototype["my-field"] = undefined | | 数字字面量 key | 0 | ✅ this.prototype[0] = undefined | | 类表达式 | const X = class { ... } | ✅ 同 class 声明一样生效 | | static 字段 | static count = 0 | ❌ 跳过 | | 方法 / getter / setter | greet() {} | ❌ 跳过 | | 无实例字段的类 | 纯方法 | ❌ 不插入 static block |

适用场景

• 装饰器方案补充：未写装饰器的字段也会被标记到 prototype
• 运行时反射 / ORM / 序列化：框架在实例化前就能收集字段元数据
• AOP 切面注入：在字段读取/写入时插入拦截逻辑
• 与 useDefineForClassFields 一致的可见语义：让运行时代码明确知道字段的存在

要求

• TypeScript >= 4.4（需要 static {} 语法支持）

安装

npm install typescript-plugin-mark-fields

用法

TypeScript Compiler API

import ts from 'typescript';
import plugin from 'typescript-plugin-mark-fields';

const program = ts.createProgram(['src/index.ts'], {
  target: ts.ScriptTarget.ESNext,
});

const transformers: ts.CustomTransformers = {
  before: [plugin(program, {})],
};

program.emit(undefined, undefined, undefined, undefined, transformers);

Rollup

// rollup.config.js
import typescript from '@rollup/plugin-typescript';
import plugin from 'typescript-plugin-mark-fields';

export default {
  input: 'src/index.ts',
  plugins: [
    typescript({
      transformers: (program) => ({
        before: [plugin(program, {})],
      }),
    }),
  ],
};

Webpack (ts-loader)

// webpack.config.js
const plugin = require('typescript-plugin-mark-fields');

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: {
          getCustomTransformers: (program) => ({
            before: [plugin(program, {})],
          }),
        },
      },
    ],
  },
};

ttypescript / ts-patch

在 tsconfig.json 中添加：

{
  "compilerOptions": {
    "plugins": [
      { "transform": "typescript-plugin-mark-fields" }
    ]
  }
}

然后用 ttsc 代替 tsc 编译。

License

MIT