JQuery 插件 typescript 定义 mixin

Question

我正在用 TypeScript 编写 JQuery 插件。

我有一个 class Foo.ts

的实现

//Foo.ts
export class Foo {}

我已经安装了 @types/jquery 并且完成后工作正常。

现在我想在 JQuery 类型上声明一个函数，我可以像这样用 types.d.ts 文件来做：

//types.d.ts
interface JQuery {
     bar(): string;
}

这让我可以做到

//Baz.ts
let result: string = $('#Baz').bar();

但是，bar()的return类型不是string，应该是Foo。

//types.d.ts
//import {Foo} from './Foo';

interface JQuery {
     bar(): Foo;
}

在 Foo [ts] Cannot find name 'Foo' 下给我一条红线。如果我取消注释导入行，types.d.ts 很高兴，但随后我在

中收到错误

//Baz.ts
let result: string = $('#Baz').bar();
// [ts] Property 'bar' does not exist on type 'JQuery<HTMLElement>'.

JQuery 的定义似乎不再合并。我知道类型声明文件如果有导入或导出就不是全局的，但我不知道如何在其他文件中引用类型。

如何在定义引用其他类型的 JQuery 类型上声明附加函数？
此外，这是否可行，以便当我将此模块导入另一个项目时，JQuery 的类型被正确合并？

在我看来这当然是可能的。

Answer 1

如果您使用的是模块系统，那么您必须将 JQuery 的扩展名放在全局命名空间中：

import {Foo} from './Foo';

declare global {
    interface JQuery {
        bar(): Foo;
    }
}

如果您没有使用模块系统，那么您不需要在 Foo class 上使用导出并且应该可以工作。

JQuery plugin typescript definition mixin