javascript - typescript 中的条件类型参数

Question

我正在尝试创建一个函数，其中 columns 参数取决于所选的 type。

函数 useNavigation(type: "horizo​​ntal"| "grid"| "vertical", columns?: number)

当参数 type 为 grid 时，如何更改类型声明以设置列参数 required

Answer 1

您可以使用函数重载来实现这一点。在我下面的示例中，前两个声明根据您的要求指定不同的参数，而最后一个声明(以及随后的实现)接收所有可能的参数，这就是为什么 type 仍然是 'horizo​​ntal ' | '垂直' | “网格”。

调用者将获得正确的类型和自动完成，您只需在函数内部进行检查以确定基于参数的逻辑。

function useNavigation(type: 'horizontal' | 'vertical');
function useNavigation(type: 'grid', columns: number);
function useNavigation(
  type: 'horizontal' | 'vertical' | 'grid',
  columns?: number,
) {
  // Your function body...
}

这是一个 TS playground证明这一点。