如何为泛型类型的实现设置类型匹配约束？

我编写了如下TypeScript代码，期望仅允许data与options对象类型正确配对的Chart实例，但当前代码中，TS编译器未在我希望阻止的场景下报错。

class Chart<TData extends ChartData<TOptions>, TOptions extends ChartOptions> { 
    public data?: TData;
    public options?: TOptions;
}

interface ChartData<TOptions extends ChartOptions> { }
interface ChartOptions { }

interface BarChartData extends ChartData<BarChartOptions> { barChartData: number }
interface BarChartOptions extends ChartOptions { barChartOption: string }

interface PieChartData extends ChartData<PieChartOptions> { pieChartData: number }
interface PieChartOptions extends ChartOptions { pieChartOption: string}

const barChart = new Chart<BarChartData, BarChartOptions>();
const pieChart = new Chart<PieChartData, PieChartOptions>();

const mixedChart = new Chart<BarChartData, PieChartOptions>(); // 期望此处编译报错

// 试图阻止的场景：
mixedChart.data = { barChartData: 7 } as BarChartData;
mixedChart.options = {pieChartOption: 'hello' } as PieChartOptions

// BarChartData 和 PieChartOptions 不应该被允许混合使用

由于实现细节，我希望data和options能够单独更新，因此ChartData中未包含options属性。若给ChartData添加options: TOptions属性，会触发预期错误，但我不想添加这类不必要的暴露属性。请问如何在不添加冗余属性的前提下，保留类型配对约束？

核心思路是让TypeScript自动识别并约束Data与Options的绑定关系，无需手动维护双泛型的配对。以下是两种可行方案：

方法1：通过关联类型自动推导Options类型 #

给ChartData添加一个仅用于类型校验的关联类型，运行时不会产生冗余属性：

interface ChartOptions { }

// 添加只读关联类型，标记当前Data对应的Options类型
interface ChartData<TOptions extends ChartOptions> {
  readonly __boundOptions?: TOptions; // 仅用于类型约束，无运行时影响
}

interface BarChartOptions extends ChartOptions { barChartOption: string }
interface BarChartData extends ChartData<BarChartOptions> { barChartData: number }

interface PieChartOptions extends ChartOptions { pieChartOption: string}
interface PieChartData extends ChartData<PieChartOptions> { pieChartData: number }

// 仅需传入TData，自动推导对应的Options类型
class Chart<TData extends ChartData<any>> { 
    public data?: TData;
    public options?: TData['__boundOptions'];
}

const barChart = new Chart<BarChartData>();
barChart.data = { barChartData: 7 };
barChart.options = { barChartOption: 'test' }; // 类型匹配，正常

const pieChart = new Chart<PieChartData>();
pieChart.options = { pieChartOption: 'pie' }; // 正常

// 此处触发编译错误：PieChartOptions无法分配给BarChartOptions类型
const mixedChart = new Chart<BarChartData>();
mixedChart.options = { pieChartOption: 'hello' };

方法2：通过泛型约束强制配对 #

如果需要保留双泛型参数的写法，可通过辅助类型验证TData与TOptions的绑定关系：

interface ChartOptions { }
interface ChartData<TOptions extends ChartOptions> { }

interface BarChartOptions extends ChartOptions { barChartOption: string }
interface BarChartData extends ChartData<BarChartOptions> { barChartData: number }

interface PieChartOptions extends ChartOptions { pieChartOption: string}
interface PieChartData extends ChartData<PieChartOptions> { pieChartData: number }

// 辅助类型：提取ChartData对应的Options类型
type ExtractBoundOptions<T extends ChartData<any>> = T extends ChartData<infer O> ? O : never;

// 约束TOptions必须与TData绑定的Options完全一致
class Chart<TData extends ChartData<TOptions>, TOptions extends ExtractBoundOptions<TData>> { 
    public data?: TData;
    public options?: TOptions;
}

const barChart = new Chart<BarChartData, BarChartOptions>(); // 正常
const pieChart = new Chart<PieChartData, PieChartOptions>(); // 正常

// 此处触发编译错误：PieChartOptions不满足ExtractBoundOptions<BarChartData>约束
const mixedChart = new Chart<BarChartData, PieChartOptions>();

方案对比 #

• 方法1更简洁，用户只需传入Data类型，TypeScript自动处理配对；
• 方法2适合需要保留双泛型参数的场景，通过约束强制类型匹配。

两种方案均无需添加运行时可见的冗余属性，完全通过类型层面实现Data与Options的配对约束。

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