TypeScript函数类型新增额外属性后传入普通函数报错如何解决？

报错原因 #

你定义的GreetFunction属于带附加属性的可调用类型，该类型要求传入的值同时满足两个条件：

• 是可调用的函数，接收一个字符串参数，无返回值
• 自身带有desc属性，属性值为字符串类型

你直接声明的printToConsole仅满足第一个调用签名要求，没有附加desc属性，因此类型校验不通过抛出错误。

解决方法 #

方法1：使用Object.assign创建带附加属性的函数 #

Object.assign会自动合并函数和属性对象，生成的返回值天然符合带属性的函数类型要求：

type GreetFunction = {
  desc: string;
  (x: string): void;
};
function greeter(fn: GreetFunction) {
  fn("Hello");
  // 也可以正常访问附加属性
  console.log(fn.desc);
}

const printToConsole = Object.assign(
  (a: string) => {
    console.log(a);
  },
  { desc: "打印输入内容到控制台" }
);

greeter(printToConsole); // 类型校验通过

方法2：先声明函数再补加属性 #

如果偏好先写函数逻辑再加属性，可以通过类型断言提前声明函数的类型，再给属性赋值：

const printToConsole = ((a: string) => {
  console.log(a);
}) as GreetFunction;
printToConsole.desc = "打印输入内容到控制台";

greeter(printToConsole); // 类型校验通过

方法3：修改类型把属性设为可选（非强制要求属性时使用） #

如果你的业务场景不需要强制要求传入的函数必须带desc属性，可以把属性定义为可选：

type GreetFunction = {
  desc?: string; // 加问号设为可选
  (x: string): void;
};

// 后续直接传普通函数也可以通过校验
function printToConsole(a: string) {
  console.log(a);
}
greeter(printToConsole);

内容的提问来源于stack exchange，提问作者Badhusha