JQuery 插件 typescript 定义 mixin答案

【问题标题】：JQuery plugin typescript definition mixinJQuery 插件 typescript 定义 mixin
【发布时间】：2018-08-14 08:27:53
【问题描述】：

我正在用 TypeScript 编写一个 JQuery 插件。

我有一个类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() 的返回类型不是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 的类型？

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

【问题讨论】：

【解决方案1】：

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

import {Foo} from './Foo';

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

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

【讨论】：