如何在TypeScript中定义带属性的函数结构？

嘿，作为TypeScript新手碰到这种「带属性的函数」确实容易摸不着头脑，我来给你拆解清楚怎么定义合法的结构～

方式一：类型别名 + 交叉类型 #

你可以先定义函数的类型，再用交叉类型（&）把它和属性类型组合起来，这样就能得到一个既可以调用、又带属性的结构：

// 定义带属性的函数类型
type FunctionWithProps = ((input: string) => number) & {
  uniqueId: string;
  version: number;
};

// 创建符合类型的函数
const myFunc: FunctionWithProps = ((input) => {
  return input.length;
}) as FunctionWithProps;

// 给属性赋值
myFunc.uniqueId = "user_func_123";
myFunc.version = 2;

// 正常调用函数 + 访问属性
console.log(myFunc("hello")); // 输出5
console.log(myFunc.uniqueId); // 输出user_func_123

这里用类型断言（as FunctionWithProps）是因为TS默认只会把赋值的函数识别成普通函数，需要告诉它这个函数还包含额外属性。

方式二：接口定义调用签名 #

TypeScript的接口支持直接定义调用签名，也就是函数的调用方式，同时还能在接口里添加属性，写法更直观：

// 定义接口：先写调用签名，再写属性
interface FunctionWithProps {
  (input: string): number;
  uniqueId: string;
  version: number;
}

// 创建符合接口的函数
function createFunc(): FunctionWithProps {
  // 先写普通函数逻辑
  const func = (input: string) => input.length;
  // 给函数添加属性
  func.uniqueId = "user_func_123";
  func.version = 2;
  // 断言返回类型
  return func as FunctionWithProps;
}

const myFunc = createFunc();
// 调用函数 + 访问属性都没问题
myFunc("world"); // 返回5
myFunc.version; // 2

这种方式适合需要复用这个结构的场景，接口的可读性会更好一些。

额外小技巧：先写函数再补类型 #

如果已经写好了函数，只是想给它加上属性和类型注解，也可以这么做：

// 先定义普通函数
const myFunc = (input: string) => input.length;
// 直接给函数加属性
myFunc.uniqueId = "user_func_123";
myFunc.version = 2;

// 事后定义类型并注解
type FunctionWithProps = ((input: string) => number) & {
  uniqueId: string;
  version: number;
};

const typedFunc: FunctionWithProps = myFunc;

这样也能让TS正确识别这个带属性的函数。

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