打字稿函数接口

Posted

技术标签:

【中文标题】打字稿函数接口【英文标题】:Typescript Function Interface 【发布时间】:2013-01-26 15:40:08 【问题描述】:

为什么 Typescript 没有警告我我定义的函数与接口声明不匹配,但如果我尝试调用该函数,它会警告我。

interface IFormatter 
    (data: string, toUpper : boolean): string;
;

//Compiler does not flag error here.
var upperCaseFormatter: IFormatter = function (data: string) 
    return data.toUpperCase();
  

upperCaseFormatter("test"); //but does flag an error here.

【问题讨论】:

【参考方案1】:

该接口确保实现该接口的所有函数调用者都提供所需的参数 - datatoUpper

因为 TypeScript 理解 javascript 不介意您传递未使用的参数,所以它巧妙地在实现中允许这样做。

为什么会这样?因为这意味着您可以替换接口的任何实现而不影响调用代码。

示例:您可以替换任一 IFormatter 实现并且代码有效。

interface IFormatter 
    (data: string, toUpper: boolean): string;
;

var upperCaseFormatter: IFormatter = function (data: string) 
    return data.toUpperCase();


var variableCaseFormatter: IFormatter = function (data: string, toUpper: boolean) 
    if (toUpper) 
        return data.toUpperCase();
    

    return data.toLowerCase();


// Switch between these at will
//var formatter = upperCaseFormatter;
var formatter = variableCaseFormatter;

formatter("test", true);

如果 TypeScript 不这样做,您的 upperCaseFormatter 必须有一个名为 toUpper 的参数,该参数未在函数中的任何地方使用 - 这会降低代码的可读性。

【讨论】:

但是使用upperCaseFormatter 有一个冗余的布尔值:upperCaseFormatter("test", true); // excluding the 'true' will result in a compiler warning。因此,接口是错误的,应该是:interface IFormatter (data: string, toUpper? : bool): string; 但这意味着您可以只使用variableCaseFormatter('test'); 调用variableCaseFormatter,而无需指定toUpper,尽管它在函数签名中。有关我当前困惑的更简单示例,请在此处查看我的问题:***.com/questions/23305020 @AJP 如果您正在编写干净的代码,那么您永远不会编写可变大小写格式化程序。你会为上写一个类,为下写一个类,并完全避免讨厌的布尔参数。 @AJP 如果你直接调用upperCaseFormatter,接口是无关紧要的。 有没有更好的语法来为对象方法提供这样的函数接口?例如。 myMethod() return;

以上是关于打字稿函数接口的主要内容,如果未能解决你的问题,请参考以下文章

通用无状态组件 React 的类型?或在打字稿中扩展通用函数接口以具有进一步的通用性?

打字稿函数类型分配问题

打字稿中的重载函数类型

从类创建派生类型,但省略构造函数(打字稿)

打字稿从json创建一个类

当扩展与打字稿中的react-final-form FieldRenderProps接口时发生冲突