TypeScript中Chart子类差异化options适配buildChart工厂方法的实现方案

核心思路是通过枚举-Options类型映射表建立枚举值和对应配置类型的关联，再结合工厂函数泛型自动推导入参类型，实现类型安全的多配置项适配。

步骤1：定义类型映射表 #

首先预先建立枚举值和对应Options类型的绑定关系，后续新增图表类型只需扩展该映射表即可：

// 各图表独立Options类型定义
type BarChartOptions = {
    start: number;
    end?: number;
}
type TimeseriesChartOptions = {
    description: string;
}

// Charts枚举和Options的映射表
type ChartOptionsMap = {
    [Charts.barChart]: BarChartOptions;
    [Charts.stackedTimeseries]: TimeseriesChartOptions;
    // 新增图表类型时在此补充映射即可
}

步骤2：调整类型定义与基类 #

修改InstantiableClass泛型约束，同时将基类Chart改为泛型类适配不同Options类型：

// 支持构造函数参数约束的可实例化类型
export declare type InstantiableClass<T, Args extends any[] = any[]> = (new (...args: Args) => InstanceType<T>) & T;

// Chart基类泛型化，接收Options类型参数
export class Chart<Options = any> {
    constructor(public data: Array<TimeseriesData>, public options: Options) {}
    // 原有基类逻辑保留
    public chart = {};
}

// 子类只需定义自身对应的Options类型即可
export class TimeseriesChart extends Chart<TimeseriesChartOptions>{
    constructor(data: Array<TimeseriesData>, options: TimeseriesChartOptions) {
        super(data, options);
    }
}

export class BarChart extends Chart<BarChartOptions>{
    constructor(data: Array<TimeseriesData>, options: BarChartOptions) {
        super(data, options);
    }
}

步骤3：修改工厂函数 #

将buildChart改为泛型函数，自动根据传入的枚举值推导对应Options的类型约束：

export function buildChart<T extends Charts>(type: T, data: Array<TimeseriesData>, options: ChartOptionsMap[T]) {
    const chartsMap = new Map<Charts, InstantiableClass<typeof Chart, [Array<TimeseriesData>, any]>>([
        [Charts.stackedTimeseries, TimeseriesChart],
        [Charts.barChart, BarChart],
    ]);
    const ChartCtor = chartsMap.get(type);
    if (!ChartCtor) {
        throw new Error(`不支持的图表类型：${type}`);
    }
    return new ChartCtor(data, options).chart;
}

效果验证 #

调用工厂函数时TS会自动校验入参类型：

// 合法调用
buildChart(Charts.barChart, [], { start: 10 });
buildChart(Charts.stackedTimeseries, [], { description: "测试图表" });

// 非法调用会触发TS报错，类型不匹配
buildChart(Charts.barChart, [], { description: "测试" }); // 缺少必填属性start
buildChart(Charts.stackedTimeseries, [], { start: 10 }); // 缺少必填属性description

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