48

如何编写一个实现此 TypeScript 接口的类（并使 TypeScript 编译器满意）：

interface MyInterface {
    (): string;
    text2(content: string);
}

我看到了这个相关的答案： How to make a class implement a call signature in Typescript？

但这只有在接口只有裸函数签名时才有效。如果您要实现其他成员（例如函数 text2），则它不起作用。

4

3 回答 3

48

一个类不能实现 typescript 接口中可用的所有内容。两个主要示例是可调用签名和索引操作，例如：实现可索引接口

原因是接口主要用于描述 JavaScript 对象可以做的任何事情。因此，它需要非常健壮。然而，TypeScript 类旨在以更 OO 传统/易于理解/易于键入的方式专门表示原型继承。

您仍然可以创建一个遵循该接口的对象：

interface MyInterface {
    (): string;
    text2(content: string);
}

var MyType = ((): MyInterface=>{
  var x:any = function():string { // Notice the any 
      return "Some string"; // Dummy implementation 
  }
  x.text2 = function(content:string){
      console.log(content); // Dummy implementation 
  }
  return x;
}
);
于 2013-05-12T14:49:14.423 回答
19

使用 ES6 有一种简单且类型安全的方法可以做到这一点Object.assign：

const foo: MyInterface = Object.assign(
  // Callable signature implementation
  () => 'hi',
  {
    // Additional properties
    text2(content) { /* ... */ }
  }
)

最初提出和回答这个问题时，我认为 TypeScript 中没有交叉类型，这是正确输入的秘诀。

于 2016-11-17T14:46:52.627 回答
10

这是对已接受答案的详细说明。

据我所知，实现调用签名的唯一方法是使用函数/方法。要实现其余成员，只需在此函数上定义它们。对于来自 C# 或 Java 的开发人员来说，这可能看起来很奇怪，但我认为这在 JavaScript 中很正常。

在 JavaScript 中，这很简单，因为您可以定义函数然后添加成员。但是，TypeScript 的类型系统不允许这样做，因为在此示例中，Function它没有定义text2成员。

所以要达到你想要的结果，你需要在定义函数的成员时绕过类型系统，然后你可以将结果转换为接口类型：

//A closure is used here to encapsulate the temporary untyped variable, "result".
var implementation = (() => {
    //"any" type specified to bypass type system for next statement.
    //Defines the implementation of the call signature.
    var result: any = () => "Hello";

    //Defines the implementation of the other member.
    result.text2 = (content: string) => { };

    //Converts the temporary variable to the interface type.
    return <MyInterface>result;
})(); //Invokes the closure to produce the implementation

请注意，您不需要使用闭包。您可以在与生成的接口实现相同的范围内声明您的临时变量。另一种选择是命名闭包函数以提高可读性。

这是我认为更现实的例子：

interface TextRetriever {
    (): string;
    Replace(text: string);
}

function makeInMemoryTextRetriever(initialText: string) {
    var currentText = initialText;
    var instance: any = () => currentText;
    instance.Replace = (newText: string) => currentText = newText;

    return <TextRetriever>instance;
}

var inMemoryTextRetriever = makeInMemoryTextRetriever("Hello");
于 2013-12-23T03:39:57.727 回答