迹忆客 专注技术分享

“This expression is not callable. Not all constituents of type 'X | Y” are callable”的错误出现在一个值可能是多种类型时，其中一些类型不是函数。要解决该错误，请使用类型保护来使 在调用它之前确保该值是一个函数。

以下是发生上述错误的一个示例：

// 👇️ returns string OR function
function example() {
  return [
    'hello',
    function sum(a: number, b: number) {
      return a + b;
    },
  ];
}

// 👇️ sum is string OR function
const [str, sum] = example();

// ⛔️ Error: This expression is not callable.
// Not all constituents of type 'string | ((a: number, b: number) => number)' are callable.
// Type 'string' has no call signatures.ts(2349)
console.log(sum(15, 30));

该函数返回一个包含字符串和函数的数组。

这里的问题是函数的返回值被键入为 (string | ((a: number, b: number) => number))[]，换句话说 - 一个包含字符串或函数的数组。

通过组合两个或多个其他类型形成的类型在 TypeScript 中称为联合类型。

我们需要一种方法来告诉编译器我们确定我们尝试调用的值是一个函数。

要解决此特定场景中的错误，请使用 const 断言。

// 👇️ returns tuple with 1st element string
// and second element function
function example() {
  return [
    'hello',
    function sum(a: number, b: number) {
      return a + b;
    },
  ] as const; // 👈️ const assertion
}

// 👇️ sum is function
const [, sum] = example();

// ✅ works as expected
console.log(sum(15, 30));

const 断言将函数的返回值从包含字符串或函数元素的数组更改为包含字符串第一个元素和函数第二个元素的元组。

另一种方法是使用类型保护并在调用它之前确保该值是一个函数。

function example() {
  return [
    'hello',
    function sum(a: number, b: number) {
      return a + b;
    },
  ];
}

// 👇️ sum is string or function
const [, sum] = example();

if (typeof sum === 'function') {
  // 👇️ sum is function here
  // ✅ works as expected
  console.log(sum(10, 15));
}

在接口或类型别名中使用联合类型时，我们也可能会遇到错误。

interface Person {
  [key: string]: string | ((a: number, b: number) => number);
}

const person: Person = {
  sum(a: number, b: number) {
    return a + b;
  },
};

// ⛔️ Error:  Not all constituents of type
//'string | ((a: number, b: number) => number)' are callable.
person.sum(100, 200);

上面的示例使用联合类型和索引签名来指定 Person 类型可以具有任何名称的属性，只要它们具有字符串类型或函数类型即可。

TypeScript 警告我们对象中的属性可能是字符串类型，因此我们不能在不确定它是函数的情况下直接调用它。

要解决这个问题，请使用 typeof 运算符并检查该值是否为函数。

interface Person {
  [key: string]: string | ((a: number, b: number) => number);
}

const person: Person = {
  sum(a: number, b: number) {
    return a + b;
  },
};

if (typeof person.sum === 'function') {
  person.sum(100, 200);
}

更好的解决方案是更具体并为类型设置特定的属性名称，因为我们可能在接口中有多个函数采用不同类型的参数。

interface Person {
  [key: string]: string | ((a: number, b: number) => number);
  sum: (a: number, b: number) => number; // 👈️ added this
}

const person: Person = {
  sum(a: number, b: number) {
    return a + b;
  },
};

// ✅ Works as expected
console.log(person.sum(10, 20));

现在 TypeScript 知道对象的 sum 属性将是一个函数，它不能是一个字符串。

总结

“This expression is not callable. Not all constituents of type 'X | Y” are callable”的错误出现在一个值可能是多种类型时，其中一些类型不是函数。要解决该错误，需要使用类型保护来使 在调用它之前确保该值是一个函数。