TS2322:类型不可分配给带有箭头函数的类型

Question

我正在尝试定义一个基本接口，其中包含一个箭头函数作为属性。但是，它给了我一个TS错误。

interface InterfaceTest {
  input?: (test: number | string) => number | undefined;
}

const myVariable: InterfaceTest = {
  input: (test: number) => {
    return test;
  },
};

const myVariable2: InterfaceTest = {
  input: (test: string) => {
    return parseInt(test, 2);
  },
};

TS2322：类型'（测试：数字）=

事实上，我不理解这个错误，因为我想要一个字符串或一个数字作为我的函数的参数，它告诉我我不能只使用数字。如何将字符串或数字作为箭头函数的输入？

此外，当我这样做，错误消失

interface InterfaceTest {
  input?(test: number | string): number | undefined;
}

const myVariable: InterfaceTest = {
  input: (test: number) => {
    return test;
  },
};

const myVariable2: InterfaceTest = {
  input: (test: string) => {
    return parseInt(test, 2);
  },
};

为什么？

Answer 1

简言之。。如果接口说可以传递字符串或数字，那么在实现该接口时。。该函数还需要能够接收字符串或数字。

如果接口的实现将类型从string | number减少为juststring或justnumber，则会破坏契约。

所以我现在做的是不可能的

这有点难说，因为你的例子是一个非常人工的例子，可能不能代表你实际要做的事情。

使用接口的想法是，其他东西可以接收该接口的实例，并且可以放心地使用字符串或数字来访问您的函数。显然，您的情况并非如此，因为myVariable只接受一个数字，myVariable2只接受一个字符串。

可以这样表示接口：

interface InterfaceTest {
   input?: (test: number) => number | undefined | (test: string) => number | undefined;
}

此接口说明，如果存在input，则它必须具有这两个函数中的任何一个的实现，但使用此函数也会遇到问题，因为现在很难确定接口的实现是number还是string类型。

这可能意味着类型保护或类型断言。

但回到原点，我认为这个例子有点荒谬。界面的目标是什么？为什么它是一个界面呢？

在什么情况下，您需要能够将myVariable替换为myVariable2。

剥离接口显然是有效的，因此您使用接口一定有原因：

const myVariable = {
  input: (test: number) => {
    return test;
  },
};

const myVariable2 = {
  input: (test: string) => {
    return parseInt(test, 2);
  },
};

有一种方法可以解决这种低谷泛型，但我不太愿意建议这样做，因为我担心你可能没有出于正确的原因使用这个接口。

但它在这里：

假设您的InterfaceTest有许多函数，并且可能有一个输入函数。但是基本上有两种变体，一种变体只适用于数字，另一种变体只适用于字符串。

示例的通用版本如下所示：

interface InterfaceTest<T> {
  input?(test: T): number | undefined;
}

const myVariable: InterfaceTest<number> = {
  input: (test: number) => {
    return test;
  },
};

const myVariable2: InterfaceTest<string> = {
  input: (test: string) => {
    return parseInt(test, 2);
  },
};