TypeScript中如何实现包含普通函数属性的函数接口？

当TypeScript接口同时包含函数调用签名和额外属性时，直接赋值普通函数会因缺少属性报错，而对象字面量的写法语法不合法。这里提供两种可行的实现方式：

方法一：先定义函数，再添加属性 #

函数在JavaScript中本质是对象，因此可以先创建符合签名的函数，再为其添加额外属性：

interface FunctionInterface {
    (s: string): boolean;
    foo: () => void;
}

// 先实现函数逻辑
const f = (s: string): boolean => true;
// 为函数添加foo属性
f.foo = () => {};

// 类型标注为目标接口
const func: FunctionInterface = f;

// 正常调用函数和属性方法
const b: boolean = func('test string');
func.foo();

方法二：使用Object.assign合并函数与属性 #

通过Object.assign将函数和包含额外属性的对象合并，TypeScript会自动识别合并后的类型符合接口要求：

interface FunctionInterface {
    (s: string): boolean;
    foo: () => void;
}

const f: FunctionInterface = Object.assign(
    (s: string): boolean => true,
    { foo: () => {} }
);

const b: boolean = f('test string');
f.foo();

为什么你的写法报错？ #

你尝试用对象字面量直接包含函数调用签名的语法是不合法的，TypeScript不支持在对象字面量中直接定义函数调用签名，必须通过「函数实体+附加属性」的方式，来实现同时满足函数调用和额外属性的接口。

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