当定义需要 import 语句时，如何扩展现有接口？

我创建了一个自定义 Knockout 扩展器，但在扩展 Knockout 定义文件提供的现有接口时遇到了问题。

扩展器/Numeric.ts

import * as ko from "knockout";

function Extender(target: KnockoutObservable<number>, options: IOptions = {}): KnockoutObservable<number> {
    // ...
};

interface IOptions {
    // ...
}

export {Extender as NumericExtender, IOptions as INumericExtenderOptions}

Boot.ts

import * as ko from "knockout";
import {NumericExtender} from "./Extenders/Numeric";

class Boot {    
    public constructor() {
        ko.extenders.numeric = NumericExtender;
    }
}

让编译器了解ko.extenders.numeric，我需要扩展现有的接口：

interface KnockoutExtenders {
    numeric(target: KnockoutObservable<number>, options?: INumericExtenderOptions): KnockoutObservable<number>;
}

现在我在这里遇到了麻烦。为了访问INumericExtenderOptions，我需要一个import陈述：

import {INumericExtenderOptions} from "./Extenders/Numeric";

但是当添加了 import 语句后，该文件就被认为是一个模块，这使得无法扩展现有接口 https://stackoverflow.com/a/32959534/247702.

有没有办法做到这一点，或者我需要搬家IOptions到定义文件以避免import?

看来您正在使用全局版本的淘汰声明文件。我认为不可能从模块声明文件中扩展在全局范围内定义的接口。有几种解决方案：

• 我认为最简单的解决方案是将您的接口放入全局命名空间中以及。对于 IOptions，这变为：

  // index.d.ts
  interface IOptions {
    // ¯\_(ツ)_/¯
  }
  
  interface KnockoutExtenders {
    numeric(target: KnockoutObservable<number>, options?: IOptions): KnockoutObservable<number>;
  }
  

  现在，您可以在任何地方使用数字函数访问 IOptions 和 KnockoutExtenders，因为声明文件仍然是全局的。

• 另一种解决方案是拉入模块版本（我认为这是我的首选解决方案，只是因为您不会用所有淘汰类型污染全局名称空间）。在淘汰赛的情况下：typings install --save knockout。然后，您必须在需要时专门导入所需的类型。例如。你的 numeric.ts 变成

  // src/numeric.ts
  import { Observable } from "knockout"
  
  export function Extender(target: Observable<number>, options: IOptions = {}): Observable<number> {
    // ¯\_(ツ)_/¯
  };
  
  export interface IOptions {
    // ¯\_(ツ)_/¯
  }
  

  然后您可以在另一个声明文件中扩充敲除模块。例如：

  // index.d.ts
  import { Observable } from "knockout"
  import { IOptions } from './src/numeric'
  
  declare module "knockout" {
    interface Extenders {
      numeric(target: Observable<number>, options?: IOptions): Observable<number>
    }
  }
  

  然后您应该能够在应用程序中的任何位置使用增强的扩展器接口：

  // src/boot.js
  import { extenders } from "knockout"
  import { Extender } from "./numeric"
  
  class Boot {
    public constructor() {
      extenders.numeric = Extender
    }
  }
  

• 最终的解决方案（可能最好地解决您的问题）是使用模块化声明文件，但要增强全局模块。您的 numeric.ts 保持不变，并且您的声明文件变为：

  import { IOptions } from './src/numeric'
  
  declare global {
    interface KnockoutExtenders {
      numeric(target: KnockoutObservable<number>, options?: IOptions): KnockoutObservable<number>
    }
  }
  

欲了解更多信息，请查看打字稿手册中有关声明合并的页面。 https://www.typescriptlang.org/docs/handbook/declaration-merging.html