混入(Mixins)模式实现

混入模式是一种在TypeScript中实现代码复用的强大方式，允许将多个类的功能组合到一个类中。它通过横向扩展功能而非继承，解决了多重继承的复杂性，同时保持类型安全。下面从基础实现到高级技巧逐步展开。

混入的基本概念

混入本质上是将多个类的属性和方法合并到一个类中。TypeScript通过交叉类型和类表达式实现这一特性。与继承不同，混入是组合而非层级关系，更适合横向功能扩展。

type Constructor<T = {}> = new (...args: any[]) => T;

function TimestampMixin<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    timestamp = Date.now();
    logTime() {
      console.log(`Created at: ${this.timestamp}`);
    }
  };
}

class User {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

const TimestampedUser = TimestampMixin(User);
const user = new TimestampedUser("Alice");
user.logTime(); // 输出创建时间戳

实现多重混入

TypeScript支持通过链式调用实现多重混入，每个混入函数接收前一个混入结果作为基类：

function SerializableMixin<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    serialize() {
      return JSON.stringify(this);
    }
  };
}

const UserWithFeatures = SerializableMixin(TimestampMixin(User));

const advancedUser = new UserWithFeatures("Bob");
advancedUser.logTime();
console.log(advancedUser.serialize());

处理命名冲突

当混入存在同名成员时，后应用的混入会覆盖前者。可以通过显式处理解决冲突：

function ConflictMixin<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    timestamp = "overridden";
    logTime() {
      super.logTime?.(); // 可选链调用父级方法
      console.log(`Overridden time: ${this.timestamp}`);
    }
  };
}

带构造函数的混入

混入可以处理构造函数参数，通过参数展开传递：

function TaggedMixin<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    tag: string;
    constructor(...args: any[]) {
      const [tag, ...rest] = args;
      super(...rest);
      this.tag = tag;
    }
  };
}

class Point {
  x: number;
  y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}

const TaggedPoint = TaggedMixin(Point);
const p = new TaggedPoint("origin", 0, 0);

接口合并与混入

通过声明合并为混入类添加类型支持：

interface TaggedPoint extends Point {
  tag: string;
}

const TaggedPoint = TaggedMixin(Point);
const tp: TaggedPoint = new TaggedPoint("demo", 1, 2);

动态混入应用

运行时根据条件决定是否应用混入：

function ConditionalMixin(enable: boolean) {
  return function <TBase extends Constructor>(Base: TBase) {
    return enable 
      ? class extends Base {
          debug() {
            console.log("Debug mode enabled");
          }
        }
      : Base;
  };
}

const DebugUser = ConditionalMixin(true)(User);
new DebugUser("Debug").debug();

混入与装饰器结合

利用装饰器语法简化混入应用：

function mixin(...mixins: Array<(base: Constructor) => Constructor>) {
  return function (target: Constructor) {
    return mixins.reduce((base, mixin) => mixin(base), target);
  };
}

@mixin(TimestampMixin, SerializableMixin)
class EnhancedUser extends User {}

混入的局限性

1. 实例属性初始化顺序依赖混入应用顺序
2. 方法覆盖可能破坏父类功能
3. 类型系统无法完全捕获运行时行为
4. 调试时调用栈较深

// 属性初始化顺序示例
function A<T extends Constructor>(Base: T) {
  return class extends Base {
    value = "A";
  };
}

function B<T extends Constructor>(Base: T) {
  return class extends Base {
    value = "B";
  };
}

const C = B(A(class {}));
console.log(new C().value); // 输出 "B"

高级类型推断

使用泛型约束提升类型安全性：

function StrictMixin<
  TBase extends Constructor,
  TProps extends Record<string, unknown>
>(Base: TBase, props: TProps) {
  return class extends Base {
    constructor(...args: any[]) {
      super(...args);
      Object.assign(this, props);
    }
  } & { [K in keyof TProps]: TProps[K] };
}

const StrictUser = StrictMixin(User, { role: "admin" });
const su = new StrictUser("Admin");
console.log(su.role); // 类型安全访问

混入与React组件

在React中组合高阶组件：

function withLogging<P>(WrappedComponent: React.ComponentType<P>) {
  return class extends React.Component<P> {
    componentDidMount() {
      console.log("Component mounted", this.props);
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

const LoggedButton = withLogging(Button);

性能优化技巧

1. 避免在渲染函数中创建混入类
2. 对静态混入结果进行缓存
3. 使用轻量级属性描述符

const cachedMixins = new WeakMap();

function CachedMixin<T extends Constructor>(Base: T) {
  if (!cachedMixins.has(Base)) {
    cachedMixins.set(Base, 
      class extends Base {
        // 混入实现
      }
    );
  }
  return cachedMixins.get(Base);
}

测试混入组件

使用Jest测试混入行为：

describe("TimestampMixin", () => {
  it("should add timestamp property", () => {
    const TestClass = TimestampMixin(class {});
    const instance = new TestClass();
    expect(instance.timestamp).toBeCloseTo(Date.now(), -2);
  });
});

浏览器环境差异处理

处理不同环境下的原型链差异：

function SafeMixin<T extends Constructor>(Base: T) {
  const wrapper = class extends Base {};
  // 复制静态属性
  Object.getOwnPropertyNames(Base)
    .filter(prop => typeof Base[prop] === "function")
    .forEach(prop => {
      wrapper[prop] = Base[prop];
    });
  return wrapper;
}

混入与状态管理

结合Vue composition API：

function useStoreMixin(store: Store) {
  return function <T extends Constructor>(Base: T) {
    return class extends Base {
      $store = store;
      get storeState() {
        return this.$store.state;
      }
    };
  };
}

类型安全的混入工厂

创建带类型约束的混入生成器：

interface MixinFactory<T extends string> {
  <K extends T>(key: K): <U extends Constructor>(Base: U) => U & Record<K, boolean>;
}

const createToggle: MixinFactory<"visible" | "active"> = (key) => (Base) => {
  return class extends Base {
    [key] = false;
    toggle() {
      this[key] = !this[key];
    }
  };
};