为什么TypeScript中实例属性装饰器比静态属性装饰器先执行？

你观察到的执行顺序是TypeScript官方明确规范的装饰器执行优先级，属于设计上的刻意安排，不是异常行为。

核心前提 #

所有类相关的装饰器（属性、方法、类装饰器）的执行时机都是类定义解析阶段，和后续是否实例化类没有任何关系。

官方规定的装饰器执行顺序 #

TypeScript对类成员装饰器的执行优先级做了明确约定：

• 优先处理所有实例成员的装饰器：按成员在类中定义的先后顺序执行，覆盖实例属性、实例方法、实例访问器的装饰器
• 实例成员处理完成后，再处理所有静态成员的装饰器：同样按成员定义的先后顺序执行，覆盖静态属性、静态方法、静态访问器的装饰器
• 最后才会执行类本身的装饰器

对应你提供的示例代码：

function LogProp(target: any, propertyName: string | Symbol) {
  console.log(`Prop Decorator: ${propertyName} is logged`);
}

function LogMethod(
  target: any,
  name: string | Symbol,
  descriptor: PropertyDescriptor
) {
  console.log(`Method Decorator: ${name} is logged`);
}

class Book {
  @LogProp
  static staticProp: string;
  @LogProp
  instanceProp: string;

  constructor(val: string) {
    this.instanceProp = val;
  }

  @LogMethod
  instanceMethod() {
    return this.instanceProp;
  }

  @LogMethod
  static staticMethod() {
    return Math.random();
  }
}

虽然static staticProp的代码位置写在instanceProp前面，但受优先级规则约束，实际执行顺序为：

1. 执行实例属性instanceProp的@LogProp，输出Prop Decorator: instanceProp is logged
2. 执行实例方法instanceMethod的@LogMethod，输出Method Decorator: instanceMethod is logged
3. 处理完所有实例成员后，执行静态属性staticProp的@LogProp，输出Prop Decorator: staticProp is logged
4. 执行静态方法staticMethod的@LogMethod，输出Method Decorator: staticMethod is logged
   和你实际运行的输出完全匹配。

背后的设计逻辑 #

这个执行顺序完全贴合JavaScript类的底层实现逻辑：

• 类的实例成员最终会挂载到类.prototype原型对象上，是所有类实例共享的模板定义
• 类的静态成员最终是挂载到构造函数对象本身的属性

TypeScript在解析类定义时，会先完成原型对象的所有属性、方法定义和装饰逻辑注入，再处理构造函数自身的静态属性逻辑，这个流程符合类从模板到构造函数的构建顺序，也避免了静态成员处理时依赖未完成初始化的原型成员的问题。

内容的提问来源于stack exchange，提问作者ikhvjs