时间戳

首页 > 解决方案 > JQuery 插件 typescript 定义 mixin

jquery - JQuery 插件 typescript 定义 mixin

问题描述

我正在用 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>'.

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

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

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

标签： jquerytypescriptjquery-pluginstypescript-declarations

解决方案

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

import {Foo} from './Foo';

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

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

推荐阅读