TypeScript子类继承含枚举静态属性的父类时如何保留类型信息

问题说明 #

基础实现中，通过类与同名命名空间合并的方式，可以将枚举挂载为类的静态属性，通过类名.枚举名的形式同时引用值和类型，基础实现代码如下：

class Box {
  constructor(private color: Box.Color) {}
}

namespace Box {
  export enum Color {
    RED,
    GREEN,
    BLUE,
  }
}

function createBox (color: Box.Color): Box {
  return new Box(color);
}

const box = createBox(Box.Color.RED);
console.log(box); // { color: 0 }

该实现的问题在于子类化时类型断层：JavaScript运行时子类会通过原型链继承父类的静态Color属性，运行无异常，但TypeScript不会将命名空间中声明的静态类型自动同步给子类，访问SmallBox.Color作为类型时会抛出不存在该属性的类型错误：

class SmallBox extends Box { }

function createSmallBox (color: SmallBox.Color): SmallBox {
  //                            ^ 类型报错
  return new SmallBox(color);
}

const box = createSmallBox(SmallBox.Color.RED);
//                         ^ 运行时正常
console.log(box);

目前已有的折中方案是嵌套一层子命名空间做类型中转，子类手动导出父类的子命名空间实现类型同步，但会多一层Subtypes的访问路径，实现不够简洁：

class Box {
  constructor(private color: Box.Subtypes.Color) {}
}

namespace Box {
  export namespace Subtypes {
    export enum Color {
      RED,
      GREEN,
      BLUE,
    }
  }
}

function createBox (color: Box.Subtypes.Color): Box {
  return new Box(color);
}


class SmallBox extends Box { }
namespace SmallBox {
  export import Subtypes = Box.Subtypes;
}

function createSmallBox (color: SmallBox.Subtypes.Color): SmallBox {
  //                            ^ 类型校验正常
  return new SmallBox(color);
}

const box = createSmallBox(SmallBox.Subtypes.Color.RED);
//                         ^ 运行正常
console.log(box);

无冗余实现方案 #

通过静态类型约束+类表达式赋值的方式，可以完全去掉额外的命名空间声明，实现子类自动继承父类挂载的所有静态枚举类型，无需为每个子类重复写类型导出：

// 单独定义需要挂载的枚举
enum Color {
  RED,
  GREEN,
  BLUE
}

// 定义类的静态侧类型约束，统一声明所有需要挂载的静态属性
interface BoxClass {
  new (color: Color): Box
  Color: typeof Color
}

// 以类表达式的方式定义类，挂载静态属性并做类型断言
const Box: BoxClass = class Box {
  constructor(private color: Color) {}
} as BoxClass
Box.Color = Color

// 兼容原有Box.Color作为类型的引用习惯
namespace Box {
  export type Color = InstanceType<BoxClass>['color']
}

function createBox (color: Box.Color): Box {
  return new Box(color);
}

// 子类直接继承即可，无需额外写命名空间做类型导出
class SmallBox extends Box {}

function createSmallBox (color: SmallBox.Color): SmallBox {
  // 类型校验正常，无报错
  return new SmallBox(color);
}

const box = createSmallBox(SmallBox.Color.RED);
// 运行正常，输出 { color: 0 }
console.log(box);

该方案的优势：

• 完全兼容原有Box.Color的访问习惯，无额外嵌套路径
• 后续新增静态挂载属性时，只需要在BoxClass接口中补充对应类型声明、在Box类上挂载对应值即可，所有子类会自动继承对应的类型提示
• 运行时逻辑和原生类继承完全一致，无额外性能开销
• 支持多层继承，比如继承SmallBox的子类同样可以直接访问SubSmallBox.Color做类型引用，无需额外配置

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