如何在Typescript 中输入两个相互关联的变量

我有一个具有primary和secondary字段的 struct ComboChartSpec.我正在定义一个util函数来处理这个ComboChartSpec.

如果我这样定义它，它是有效的

function process1() {
  const yAxisType = 'primary';
  const otherYAxisType = 'secondary';
  return {
    [yAxisType]: foo,
    [otherYAxisType]: bar
  }
}
function process2() {
  const yAxisType = 'secondary';
  const otherYAxisType = 'primary';
  return {
    [yAxisType]: foo,
    [otherYAxisType]: bar
  }
}

我想把这两个功能合并起来.但我一直收到TS错误.我怎么才能解决它呢？谢谢!

function process(yAxisType: 'primary' | 'secondary') {
  const otherYAxisType = yAxisType === 'primary' ? 'secondary' : 'primary';
  return {
    [yAxisType]: foo,
    [otherYAxisType]: bar
  }
}

Type '{ [x: string]: { fields: never[]; } | { type: "quantitative"; }; scale: { type: "quantitative"; }; }' is not assignable to type 'ComboChartAxisEncoding<"editor">'.
  Type '{ [x: string]: { fields: never[]; } | { type: "quantitative"; }; scale: { type: "quantitative"; }; }' is not assignable to type 'ComboChartSingleAxisEncoding<"editor">'.
    Type '{ [x: string]: { fields: never[]; } | { type: "quantitative"; }; scale: { type: "quantitative"; }; }' is missing the following properties from type '{ primary: ComboChartSingleAxisSectionEncoding<"editor">; secondary: ComboChartSingleAxisSectionEncoding<"editor">; scale: QuantitativeScale; }': primary, secondaryts(2322)
index.ts(85, 3): The expected type comes from property 'y' which is declared here on type 'ComboChartEncodingMap<"editor">'

请参阅Minimal repro on TS playground👈

export type ComboChartAxisEncoding = ComboChartSingleAxisEncoding | ComboChartDualAxisEncoding;

export type ComboChartSingleAxisEncoding = {
  primary: ComboChartSingleAxisSectionEncoding;
  secondary: ComboChartSingleAxisSectionEncoding;
  scale: 'quantitative';
};
export type ComboChartSingleAxisSectionEncoding = {
  fields: number[];
};
export type ComboChartDualAxisEncoding = {
  primary: ComboChartDualAxisSectionEncoding;
  secondary: ComboChartDualAxisSectionEncoding;
};
export type ComboChartDualAxisSectionEncoding = {
  fields: number[];
  scale: 'quantitative';
};

function process1(): ComboChartAxisEncoding {
  const yAxisType: 'primary' | 'secondary' = 'primary';
  const otherYAxisType: 'primary' | 'secondary' = 'secondary';

  return { // this works
    [yAxisType]: { fields: [] },
    [otherYAxisType]: { fields: [] },
    scale: 'quantitative',
  };
}
function process2<T extends 'primary' | 'secondary'>(yAxisType: T): ComboChartAxisEncoding {
  const otherYAxisType = (yAxisType === 'primary' ? 'secondary' : 'secondary') as (T extends 'primary' ? 'secondary' : 'primary');

  // this doesn't work. Note that in my case this function wraps lots of test cases and each of them has this structure.
  // So, if I don't have to change the structure of the JS objects, and just need to change the types, it would be better.
  return { 
    [yAxisType]: { fields: [] },
    [otherYAxisType]: { fields: [] },
    scale: 'quantitative',
  };
}