如何在ES6类中复用Flow类型定义以避免代码重复？

嘿，这个问题我之前也碰到过！核心原因是你混淆了Flow的静态类型别名和ES6类的概念——Flow的type定义只是编译时用来做类型检查的注解，并不是一个可被继承的ES6类，所以extends ModalTypes肯定会报错。下面给你几种优雅的解决方案，既能复用类型定义，又能给类加上类型约束：

方案1：用implements让类实现Flow类型别名 #

这是最直接的方式，先定义好类型结构，再让类实现这个类型，避免重复编写属性的类型注解：

// 定义Flow类型别名，描述Modal的结构
type ModalTypes = {
  id: number,
  name: string
};

// 让类实现ModalTypes，确保类的结构符合类型约束
class Modal implements ModalTypes {
  // 显式声明类属性（部分Flow版本需要，也可以省略让Flow自动推断）
  id: number;
  name: string;

  constructor(data: ModalTypes) {
    this.id = data.id;
    this.name = data.name;
  }
}

implements关键字会告诉Flow：这个类必须严格符合ModalTypes的结构，这样既保证了类型安全，又不用重复写id和name的类型定义。

方案2：用Flow接口（Interface）代替类型别名 #

如果你更偏向“契约式”的类型定义，可以用Flow的interface来代替type，语义上更适合描述类的结构，用法和类型别名几乎一致：

// 定义接口，描述Modal的结构契约
interface ModalTypes {
  id: number;
  name: string;
}

class Modal implements ModalTypes {
  id: number;
  name: string;

  constructor(data: ModalTypes) {
    this.id = data.id;
    this.name = data.name;
  }
}

接口和类型别名在大多数场景下可以互换，但接口更强调“类必须遵守的结构规则”，适合类实现的场景。

方案3：用Object.assign简化属性赋值（更简洁） #

如果想省去类属性的显式声明，可以用Object.assign直接把传入的data属性挂载到实例上，Flow会自动根据ModalTypes的类型做检查：

type ModalTypes = {
  id: number,
  name: string
};

class Modal implements ModalTypes {
  constructor(data: ModalTypes) {
    // 直接把data的属性复制到实例，Flow会确保结构符合类型约束
    Object.assign(this, data);
  }
}

这种写法非常简洁，而且同样能得到Flow的类型检查保障，适合属性较多的场景。

特殊场景：需要运行时基类行为时 #

如果你不仅需要类型约束，还希望ModalTypes作为基类提供一些运行时的方法或逻辑，那应该把它定义成ES6类，同时加上Flow类型注解：

// 定义一个带类型注解的ES6基类
class ModalTypes {
  id: number;
  name: string;

  constructor(data: { id: number, name: string }) {
    this.id = data.id;
    this.name = data.name;
  }

  // 可以添加基类的方法
  logName() {
    console.log(this.name);
  }
}

// 现在可以正常继承这个类了
class Modal extends ModalTypes {
  constructor(data: { id: number, name: string }) {
    super(data);
    // 添加Modal自己的属性或方法
    this.extraProp = 'foo';
  }
}

这种方式适合需要基类有运行时行为的场景，而不仅仅是静态类型约束。

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