TypeScript：根据类型返回不同的函数

Question

我想要实现的是一个钩子，它返回一个我可以调用的函数。

type TypeName = 'circle' | 'square';

interface Circle {
  type: TypeName;
  radius: number;
}

interface Square {
  type: TypeName;
  length: number;
}

type Shape = Circle | Square;

const useShapeFilter = (shape: Shape) => {
  const circleFilter = (circle: Circle) => (circle.radius < 5);

  const squareFilter = (square: Square) => (square.length < 5);

  return {applyFilter: shape.type === 'circle' ? circleFilter : shape.type === 'square' ? squareFilter : undefined}
}

export const ShapeComponent = () => {
  const shape: Circle = {type: 'circle', radius: 10}
  const {applyFilter} = useShapeFilter(shape);

  return <div>Less than 5 : {applyFilter && applyFilter(shape)}</div>
}

但上面的代码将在 applyFilter(shape) 区域返回 TypeScript 错误： Argument of type 'Circle' is not allocate to argument of type 'Circle &正方形'。 “Circle”类型中缺少属性“length”，但“Square”类型中需要属性“length”。。

最后，我不得不改变实现并断言数据：

const useShapeFilter = (shape: Shape) => {
  const circleFilter = (circle: Circle) => (circle.radius < 5);

  const squareFilter = (square: Square) => (square.length < 5);

  if (shape.type === 'circle') {
    return circleFilter(shape as Circle)
  }
  if (shape.type === 'square') {
    return squareFilter(shape as Square)
  }
  return undefined;

}

export const AnimalPage = () => {
  const shape: Circle = {type: 'circle', radius: 10}
  const filtered = useShapeFilter(shape);

  return <div>Less than 5 : {filtered}</div>
}

但我仍然想知道如何实现我的初衷。

Answer 1

由于您返回的函数联合与原始参数没有任何关系，因此打字稿无法真正遵循 shape 实际上适合 applyFilter 的事实。一般来说，如果一个变量可以保存两个函数中的任何一个，那么只有使用该变量调用该变量才是安全的，并且参数对于任一潜在的底层函数都有效。

为了解决这个问题，我们可以使 useShapeFilter 通用，捕获原始参数，并返回一个与该特定参数兼容的函数：

function useShapeFilter<T extends Shape>(shape: T): { applyFilter: (shape: T) => boolean; } 
function useShapeFilter(shape: Shape) {
  const circleFilter = (circle: Circle) => (circle.radius < 5);

  const squareFilter = (square: Square) => (square.length < 5);

  return {applyFilter: shape.type === 'circle' ? circleFilter : shape.type === 'square' ? squareFilter : undefined}
}

游乐场链接