TypeScript装饰器跨文件失效求助：同一文件正常跨文件无效果

问题场景 #

开发TypeScript装饰器脚本时，装饰器负责将被装饰类的实例加入列表，事件触发时调用实例方法。同一文件内多个装饰类功能正常，但将带装饰器的类移到其他文件后，装饰器完全不执行，功能失效。

提供的代码 #

export class Person {
  sayRole(): void {
    console.log("generic");
  }
}

@PersonDecorator("Bob")
export class Student extends Person {
  sayRole(): void {
    console.log("student");
  }
}

var people = new Array<Person>();
function PersonDecorator(name:string) {
  return (target: any) => {
    (<Person>target).sayRole();
  };
}

问题根源 #

1. 摇树优化导致代码未执行：跨文件时，如果主文件没有显式导入装饰类所在的文件，TypeScript或打包工具（如Webpack、Vite）会把这类“未被直接使用”的代码视为无效代码，执行摇树优化（Tree Shaking），导致装饰器根本没机会运行。
2. 装饰器逻辑错误：原代码中直接调用target.sayRole()，但target是类的构造函数，sayRole是实例方法而非静态方法，直接调用会抛出错误。

解决步骤 #

1. 确保跨文件装饰类被导入

在主文件中必须显式导入装饰类所在的文件，哪怕没有直接使用类本身，目的是触发装饰器执行：

// 主文件（如index.ts）
import './Student.ts'; // 导入带装饰器的类文件

2. 修复装饰器逻辑，正确实例化并加入列表

修改装饰器，创建类的实例后再加入列表，同时修正方法调用方式：

// Person.ts
export class Person {
  sayRole(): void {
    console.log("generic");
  }
}

// 导出列表，方便跨文件访问
export const people: Person[] = [];

export function PersonDecorator(name: string) {
  return (target: typeof Person) => {
    // 创建类的实例
    const personInstance = new target();
    // 将实例加入列表
    people.push(personInstance);
    // 调用实例方法
    personInstance.sayRole();
  };
}

3. 其他文件中装饰类的写法

在独立文件中导入基类和装饰器，使用装饰器装饰类：

// Student.ts
import { Person, PersonDecorator } from './Person';

@PersonDecorator("Bob")
export class Student extends Person {
  sayRole(): void {
    console.log("student");
  }
}

4. 事件触发时调用列表中的回调

当事件触发时，遍历people列表，调用每个实例的方法：

// 主文件中定义事件触发逻辑
function onEventTrigger() {
  people.forEach(person => person.sayRole());
}

// 模拟事件触发
onEventTrigger(); // 输出：student（如果只有Student被装饰）

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