您将如何在 typescript 中定义一个同时是对象和函数的类型？

Question

在阅读this answer 到问题How is jQuery's $ a function and an object? 之后，我开始思考。你会如何在打字稿中定义这种类型？

在普通 JS 中这是完全有效的：

var f = function() { alert('yo'); }
f.foo = "bar";

alert(f.foo); // alerts "bar"
f();          // alerts "yo"

但是在 typescript 中，f.foo 会抛出错误，Property 'foo' does not exist on type '() => void'。

虽然您可以使用bracket notation 获得类似的结果：

var f = function() { alert('yo'); }
f['foo'] = "bar";

alert(f['foo']); // alerts "bar"
f();          // alerts "yo"

这将完全绕过类型系统，以及 typescript 的类型安全。

有没有一种方法可以在不违反 typescript 的类型安全的情况下实现这种类型的功能？

Answer 1

您可以使用& 定义具有多种类型的变量。它被称为“交叉类型”。更多信息在official docs。

这是在您的示例中使用它的方法：

let f: Function & {foo?: String} = function() { alert('yo'); }
f.foo = "bar";

alert(f.foo); // alerts "bar"
f();          // alerts "yo"

Playground Link

这里，f 的类型是 Function & {foo?: String}，因为它既是 Function，也是 {foo?: String}。 ? 在这里是必需的，因为您将其初始化为仅Function，然后才将值分配给foo。

您可以在 Playground 中看到代码已编译，甚至提供与您开始时相同的 JavaScript 代码，验证这是正确的语法。

Answer 2

您可以通过在接口上指定调用签名来定义这种类型：

interface MyFoo {
    (): void;
    foo: string;
}

您可以通过将函数转换为any 来初始化对象，然后再将其分配给变量：

let f: MyFoo = function() { alert('yo'); } as any;
f.foo = 'bar';
x();

Playground link

---

顺便说一句，JQueryStatic 类型（这是$ 变量的类型）在JQuery defintions 中的定义类似：

interface JQueryStatic<TElement extends Node = HTMLElement> {
    ...
    Deferred: JQuery.DeferredStatic;
    ...
    (html: JQuery.htmlString, ownerDocument_attributes: Document | JQuery.PlainObject): JQuery<TElement>;
    ...
    (selector: JQuery.Selector, context: Element | Document | JQuery | undefined): JQuery<TElement>;

（不能内联链接，所以放在这里）

• interface start
• Deferred property
• First invokable signature

但是，这并没有真正的帮助，因为您的问题也是如何使用这种类型初始化变量。 JQuery 库没有这个问题，因为它不是用 Typescript 编写的。