Question

在tutorial中，我了解了如何扩展接口。假设我有一个带有某个界面的第三方库。教程指出我可以简单地定义另一个具有完全相同名称的接口，它将扩展前一个：

// third-party source
interface jQueryElement {
    data(name: string): any;
    data(name: string, data: any): jQueryElement;
}

// my code
interface jQueryElement {
    todo(): Todo;
    todo(todo: Todo): void;
}

好的，但你如何导入它们？名称冲突会不会发生？

很抱歉，我还没有在Typescript中编写任何内容，只在Angular中编码，所以我想我可以遵循这种方法，或者唯一的方法是使用extends定义其他界面吗？：

interface jQueryElement2 extends jQueryElement {
    todo(): Todo;
    todo(todo: Todo): void;
}

Answer 1

您可以在相同范围内以这种方式扩展接口。 JQuery声明文件在全局范围内声明接口，因此这不是问题。

您只需将jquery-extension.d.ts文件添加到项目中（名称并不重要），然后再次声明界面，添加所需的方法或属性。然后，TypeScript会将其拾取并将两种类型的声明混合在一起。

当然，声明这些方法只会让TypeScript认为它们存在。您仍然必须实际定义它们（在另一个文件中，而不是d.ts文件中），或者在尝试执行它们时会遇到运行时错误。

示例：jquery-extension.d.ts

interface JQueryStatic {
    count(): number;
}

jquery-extension.ts：

jQuery.fn.count = function() {
    return this.length;
}

如果你只是在不扩展界面的情况下添加上面的代码，TypeScript就会抗议，说count不是JQueryStatic接口的已知属性。然后，您只需确保在应用程序的入口点导入jquery-extension.ts：

import 'jquery-extension'

完成了。 d.ts文件不需要导入，因为它们是环境声明文件，编译器会自行选择它们。

扩展第三方界面

1 个答案: