如何扩展在外部库 d.ts 中声明的接口？

Question

我knockout使用这样的记录方法安装了定义。

npm install @types/knockout

它工作得很好，我可以像这样在任何地方导入它。

import * as ko from "knockout";

但是，我坚持KnockoutStatic使用一些自定义内容扩展界面。我正在尝试迁移一个基于<reference ... />和namespace的巨大 TS 应用程序以使用模块。之前，我很容易在任何地方声明了扩展接口，并且这些声明被合并了。假设我的扩展看起来像这样。

interface KnockoutStatic {
  doSomething(): void;
}

我试图创建一个KnockoutExtensions.d.ts文件，我像这样声明它。

import "knockout";

declare module "knockout" {
  export interface KnockoutStatic {
    doSomething(): void;
  }
}

但是当我将两者knockout和我的扩展名都导入到某个地方时，TS 仍然无法解析doSomething呼叫。

import * as ko from "knockout";
import "./KnockoutExtensions";

ko.doSomething(); // error

使用 TypeScript 2.0 和新d.ts子系统扩展库接口的正确方法是什么？

我正在使用安装了 TypeScript 2.0 的 Visual Studio 2015 Update 3。

Answer 1

我发现winston使用export =语法也有同样的问题。react当它显示执行相同的操作时，我发现此页面很有帮助： https://www.credera.com/blog/technology-solutions/typescript-adding-custom-type-definitions-for-existing-libraries/。

他们推荐的、我发现有效的解决方案是这样的：

import 'react';

declare module 'react' {
    interface OlHTMLAttributes<T> {
        type?: "1" | "a" | "A" | "i" | "I";
    }
}

只需导入模块，然后声明它，就允许此声明块中的任何接口扩展现有的接口，并且在代码的其他部分中，您可以像平常一样继续使用该接口；即您仍然会导入reactorwinston或 ，knockout并且您会看到这些新的接口成员。您不必开始引用自定义接口或类似的东西。

Answer 2

您可以轻松扩展“淘汰赛”或任何其他 TypeScript 命名空间。

示例：创建knockout-extension.d.ts 文件

/// <reference path="<path-to-typings-dir>/knockout/index.d.ts" />

declare module 'knockout' {

  export interface CustomType {

    customField: string;

    customMethod(arg1: number, arg2: boolean): boolean;
  }

  namespace customNamespace {

    export interface AnotherCustomType {
      customField1: string;
      customField2: boolean;
    }
  }

  // NOTE: extending existing interface
  export interface KnockoutStatic {
    customMethod(): void;
  }
}

注意：确保这个文件被 TypeScript 编译器选中。

使用扩展模块中新定义的类型。

// one way
import { CustomType } from 'knockout';

const foo: CustomType;

// second way
import * as kc from 'knockout';

const foo: kc.CustomType;
const bar: kc.customNamespace.AnotherCustomType;

有关模块和命名空间的更多信息，您可以查看关于模块和命名空间的TypeScript 文档并将它们一起使用。

干杯!

Answer 3

您需要在模块外部创建界面。请勿随出口申报。

module example  {
   //...do stuff
}
 
interface KnockoutStatic {
  doSomething(): void;
}

您可以将其添加到单独的文件中，例如添加界面扩展的位置以保持干净。