无法将特定类型作为参数分配给泛型

Question

我正在尝试设置一个接口，我可以在其中传递参数而无需指定其类型。

// Wrapper.tsx
interface Props extends MenuProps, ChakraProps {
  handleTagClick: <T>(args?: T) => void
}

export const Wrapper: FC<Props> = ({ handleTagClick }): JSX.Element => {
  return(
    <Button 
       {...(
          handleTagClick && { 
            onClick: () => handleTagClick({ ...dummyQuestion, type }) })
       }
    />
  )
}

然后我调用错误出现的那个组件：

export const Container = () => {

  const { addNewThing } = useMyHook()

  // The error comes from this line
  return <Wrapper handleTagClick={addNewThing} />
}

错误：

Type '(question: VariableConfig) => void' is not assignable to type '<T>(args?: T | undefined) => void'.
  Types of parameters 'question' and 'args' are incompatible.
    Type 'T | undefined' is not assignable to type 'VariableConfig'.
      Type 'undefined' is not assignable to type 'VariableConfig'.
Wrapper.tsx(10, 3): The expected type comes from property 'handleTagClick' which is declared here on type 'IntrinsicAttributes & Partial<Props> & { children?: ReactNode; }'

我做错了什么？

Answer 1

您设计了组件，以便它在道具中接受带有unknown 类型参数的函数。这意味着，在组件内部，它假设可以为这个函数提供这样的参数。当您传递只接受 VariableConfig 类型的参数的函数时，如果它有另一个类型的参数 (unknown) 可能会导致错误。这不是预期的。要解决这个问题：

interface Props extends MenuProps, ChakraProps {
  handleTagClick: (args: VariableConfig) => void
}

---

UPD。由于我的回答似乎不完整，我在解释中添加了更多细节。我将它们分成几段。

1. 首先。 TypeScript 本质上是一个框架，可让您实现类型安全。这意味着它会跟踪所有变量的所有可能（尽可能）状态，并说明其中一些是否不安全。这是当一个变量可以绑定到一个不允许的类型的值时。你在编译阶段就知道了。但如果忽略它可能会导致运行时错误。
2. 我不知道你的应用的业务逻辑来判断你真正需要什么。但是，如果您有一个组件正在接受该函数，而该函数又接受unknown 类型的参数，然后您给出接受unknown 约束的函数，这是一个危险的情况。想象一下，其逻辑内部的组件给这个函数一个约束之外的值。这将意味着可能的运行时错误。
3. 对我来说，它表示您在组件设计中存在缺陷。您需要审核应用内部的逻辑。
4. 通用

interface Props extends MenuProps, ChakraProps {
  handleTagClick: <T>(args?: T) => void;
}

没有多大意义。其实这和表达是一样的

interface Props extends MenuProps, ChakraProps {
  handleTagClick: (args?: unknown) => void;
}

5. 可能的解决方案。你可以关闭 TypeScript 正在做的工作。你可以这样做：

return <Wrapper handleTagClick={addNewThing as any} />;

playground

但在这种情况下，您会遇到不确定性，TypeScrip 将不再为您提供帮助。

6. 第二种解决方案。写两个不同的组件。一个handleTagClick 接受所有类型的参数，第二个只接受VariableConfig。

interface Props extends MenuProps, ChakraProps {
  handleTagClick: (args?: unknown) => void;
}

interface PropsVariableConfig extends MenuProps, ChakraProps {
  handleTagClick: (args: VariableConfig) => void;
}

export const Wrapper: FC<Props> = ({ handleTagClick }): JSX.Element => {

  return (
    <Button
      {...{
        onClick: () => handleTagClick({ ...dummyQuestion, type }),
      }}
    />
  );
};

export const WrapperVariableConfig: FC<PropsVariableConfig> = ({
  handleTagClick,
}): JSX.Element => {

  return (
    <Button
      {...{
        onClick: () => handleTagClick(dummyQuestion),
      }}
    />
  );
};

export const Container = () => {
  const { addNewThing } = useMyHook();

  return <WrapperVariableConfig handleTagClick={addNewThing} />;
};

playground

1. 您可以做的最后一件事是为函数添加一个类型保护包装器。当参数的类型不受支持时，它将过滤引发错误的参数。

declare const isVariableConfigGuard = (x: unknown): x is VariableConfig;

const wrapInVariableConfigGuard = (
  f: (question: VariableConfig) => void
): ((args?: unknown) => void) => (args?: unknown) => {
  if (isVariableConfigGuard(args)) {
    return f(args);
  }

  throw Error('An argument is of not supported type');
};

export const Container = () => {
  const { addNewThing } = useMyHook();

  return <Wrapper handleTagClick={wrapInVariableConfigGuard(addNewThing)} />;
};

playground

但在这种情况下，您需要在应用的上层设置错误边界。这种模式是为了让逻辑更不透明，更混乱。