TypeScript 中是不是可以将强类型函数作为参数？

Posted 2023-03-13

【中文标题】TypeScript 中是不是可以将强类型函数作为参数？

【英文标题】：Are strongly-typed functions as parameters possible in TypeScript?TypeScript 中是否可以将强类型函数作为参数？

【发布时间】：2019-01-27 18:08:54

【问题描述】：

在 TypeScript 中，我可以将函数的参数声明为函数类型。有没有我想念的“类型安全”的方式来做到这一点？例如，考虑一下：

class Foo 
    save(callback: Function) : void 
        //Do the save
        var result : number = 42; //We get a number from the save operation
        //Can I at compile-time ensure the callback accepts a single parameter of type number somehow?
        callback(result);
    


var foo = new Foo();
var callback = (result: string) : void => 
    alert(result);

foo.save(callback);

保存回调不是类型安全的，我给它一个回调函数，其中函数的参数是一个字符串，但我传递给它一个数字，并且编译没有错误。我可以在保存类型安全函数中设置结果参数吗？

TL;DR 版本：TypeScript 中是否有一个等效的 .NET 委托？

【参考方案1】：

当然。函数的type 由其参数的类型和返回类型组成。这里我们指定callback参数的类型必须是“接受数字并返回类型any的函数”：

class Foo 
    save(callback: (n: number) => any) : void 
        callback(42);
    

var foo = new Foo();

var strCallback = (result: string) : void => 
    alert(result);

var numCallback = (result: number) : void => 
    alert(result.toString());


foo.save(strCallback); // not OK
foo.save(numCallback); // OK

如果你愿意，你可以定义一个type alias 来封装这个：

type NumberCallback = (n: number) => any;

class Foo 
    // Equivalent
    save(callback: NumberCallback) : void 
        callback(42);
    

【讨论】：

(n: number) => any 表示任何函数签名？

@nikkwong 这意味着该函数采用一个参数（number）但返回类型完全不受限制（可以是任何值，甚至可以是void）

n 在这个语法中有什么意义？仅输入和输出类型还不够吗？

使用内联函数与命名函数（下面的答案与此答案）之间的一个副作用是“this”变量未使用命名函数定义，而它是在内联函数中定义的。对于 javascript 编码人员来说并不奇怪，但对于其他编码背景来说绝对不是显而易见的。

@YuhuanJiang This post 你可能会感兴趣

【参考方案2】：

以下是一些常见的 .NET 委托的 TypeScript 等效项：

interface Action<T>

    (item: T): void;


interface Func<T,TResult>

    (item: T): TResult;

【讨论】：

可能看起来很有用，但实际使用此类类型将是一种反模式。无论如何，这些看起来更像 Java SAM 类型而不是 C# 委托。当然它们不是，它们相当于类型别名形式，对于函数来说更优雅

@AluanHaddad 您能否详细说明为什么您认为这是一种反模式？

原因是 TypeScript 具有简洁的函数类型字面量语法，无需此类接口。在 C# 中，委托是名义上的，但 Action 和 Func 委托都消除了对特定委托类型的大部分需求，并且有趣的是，给 C# 提供了结构类型的外观。这些代表的缺点是他们的名字没有任何意义，但其他优点通常超过了这一点。在 TypeScript 中，我们根本不需要这些类型。所以反模式是function map<T, U>(xs: T[], f: Func<T, U>)。首选function map<T, U>(xs: T[], f: (x: T) => U)

这是一个口味问题，因为这些是没有运行时类型的语言中的等效形式。现在你也可以使用类型别名而不是接口。

比(arg: A) => B 更喜欢Func<A, B> 的一个原因是语法优先——任何你需要使用像((arg: A) => B) 这样的括号的地方，前者不需要额外的括号。也就是说，我更喜欢更具体的类型，例如type Predicate<T> = (x: T) => boolean，因为这些增加了可读性。

【参考方案3】：

我知道这篇文章已经过时了，但有一种更简洁的方法，与所要求的略有不同，但可能是一个非常有用的替代方法。在调用方法时，您基本上可以内联声明函数（在这种情况下为Foo 的save()）。它看起来像这样：

class Foo 
    save(callback: (n: number) => any) : void 
        callback(42)
    

    multipleCallbacks(firstCallback: (s: string) => void, secondCallback: (b: boolean) => boolean): void 
        firstCallback("hello world")

        let result: boolean = secondCallback(true)
        console.log("Resulting boolean: " + result)
    


var foo = new Foo()

// Single callback example.
// Just like with @RyanCavanaugh's approach, ensure the parameter(s) and return
// types match the declared types above in the `save()` method definition.
foo.save((newNumber: number) => 
    console.log("Some number: " + newNumber)

    // This is optional, since "any" is the declared return type.
    return newNumber
)

// Multiple callbacks example.
// Each call is on a separate line for clarity.
// Note that `firstCallback()` has a void return type, while the second is boolean.
foo.multipleCallbacks(
    (s: string) => 
         console.log("Some string: " + s)
    ,
    (b: boolean) => 
        console.log("Some boolean: " + b)
        let result = b && false

        return result
    
)

multipleCallback() 方法对于诸如可能成功或失败的网络调用之类的事情非常有用。再次假设一个网络调用示例，当调用 multipleCallbacks() 时，可以在一个位置定义成功和失败的行为，这有助于未来的代码阅读器更加清晰。

一般来说，根据我的经验，这种方法更简洁，更简洁，整体上更清晰。

祝大家好运！

【参考方案4】：

type FunctionName = (n: inputType) => any;

class ClassName 
    save(callback: FunctionName) : void 
        callback(data);
    

这肯定符合函数式编程范式。

【参考方案5】：

如果你先定义函数类型，那么它看起来像

type Callback = (n: number) => void;

class Foo 
    save(callback: Callback) : void         
        callback(42);
    


var foo = new Foo();
var stringCallback = (result: string) : void => 
    console.log(result);


var numberCallback = (result: number) : void => 
    console.log(result);


foo.save(stringCallback); //--will be showing error
foo.save(numberCallback);

如果没有使用普通属性语法的函数类型，它将是：

class Foo 
    save(callback: (n: number) => void) : void         
        callback(42);
    


var foo = new Foo();
var stringCallback = (result: string) : void => 
    console.log(result);


var numberCallback = (result: number) : void => 
    console.log(result);


foo.save(stringCallback); //--will be showing error
foo.save(numberCallback);

如果你想使用像 c# 泛型委托这样的接口函数，它会是：

interface CallBackFunc<T, U>

    (input:T): U;
;

class Foo 
    save(callback: CallBackFunc<number,void>) : void         
        callback(42);
    


var foo = new Foo();
var stringCallback = (result: string) : void => 
    console.log(result);


var numberCallback = (result: number) : void => 
    console.log(result);


let strCBObj:CallBackFunc<string,void> = stringCallback;
let numberCBObj:CallBackFunc<number,void> = numberCallback;

foo.save(strCBObj); //--will be showing error
foo.save(numberCBObj);

【参考方案6】：

在 TS 中我们可以通过以下方式键入函数：

函数类型/签名

这用于函数/方法的实际实现，它具有以下语法：

(arg1: Arg1type, arg2: Arg2type) : ReturnType

示例：

function add(x: number, y: number): number 
    return x + y;


class Date 
  setTime(time: number): number 
   // ...
  

函数类型文字

函数类型字面量是另一种声明函数类型的方式。它们通常应用于高阶函数的函数签名中。高阶函数是接受函数作为参数或返回函数的函数。它的语法如下：

(arg1: Arg1type, arg2: Arg2type) => ReturnType

示例：

type FunctionType1 = (x: string, y: number) => number;

class Foo 
    save(callback: (str: string) => void) 
       // ...
    

    doStuff(callback: FunctionType1) 
       // ...
    

【参考方案7】：

除了其他人所说的，一个常见的问题是声明重载的同一函数的类型。典型的例子是 EventEmitter on() 方法，它将接受多种监听器。使用 redux 操作时可能会发生类似情况 - 并且您使用操作类型作为文字来标记重载，如果是 EventEmitters，则使用事件名称 文字类型：

interface MyEmitter extends EventEmitter 
  on(name:'click', l: ClickListener):void
  on(name:'move', l: MoveListener):void
  on(name:'die', l: DieListener):void
  //and a generic one
  on(name:string, l:(...a:any[])=>any):void


type ClickListener = (e:ClickEvent)=>void
type MoveListener = (e:MoveEvent)=>void
... etc

// will type check the correct listener when writing something like:
myEmitter.on('click', e=>...<--- autocompletion

【参考方案8】：

因为你不能轻易地将函数定义和另一种数据类型结合起来，所以我发现这些类型对于强类型化很有用。根据 Drew 的回答。

type Func<TArgs extends any[], TResult> = (...args: TArgs) => TResult; 
//Syntax sugar
type Action<TArgs extends any[]> = Func<TArgs, undefined>; 

现在您可以强输入每个参数和返回类型！这是一个比上面更多参数的示例。

save(callback: Func<[string, Object, boolean], number>): number

    let str = "";
    let obj = ;
    let bool = true;
    let result: number = callback(str, obj, bool);
    return result;

现在您可以编写联合类型，例如对象或返回对象的函数，而无需创建可能需要导出或使用的全新类型。

//THIS DOESN'T WORK
let myVar1: boolean | (parameters: object) => boolean;

//This works, but requires a type be defined each time
type myBoolFunc = (parameters: object) => boolean;
let myVar1: boolean | myBoolFunc;

//This works, with a generic type that can be used anywhere
let myVar2: boolean | Func<[object], boolean>;

【讨论】：

也许这是在以前版本的 TS 上，但是 let myVar1: boolean | (parameters: object) => boolean; 不起作用，因为您需要在函数周围添加括号 => let myVar1: boolean | ((parameters: object) => boolean);

【参考方案9】：

function callbackTesting(callbacks: onYes: (data: any) => void,onNo: (data: any) => void,onError: (err: any) => void,, type: String)
    switch(type)
        case "one": 
        callbacks.onYes("Print yes");
        break;
        case "two": 
        callbacks.onNo("Print no");
        break;
        default:
        callbacks.onError("Print error");
        break;
    


const onYes1 = (data: any) : void => 
    console.log(data);

const onNo1 = (data: any) : void => 
    console.log(data);

const onError1 = (data: any) : void => 
    console.log(data);




callbackTesting(onYes: function (data: any)  onYes1(data);,onNo: function (data: any)  onNo1(data);,onError: function (data: any)  onError1(data);, "one");

callbackTesting(onYes: function (data: any)  onYes1(data);,onNo: function (data: any)  onNo1(data);,onError: function (data: any)  onError1(data);, "two");

callbackTesting(onYes: function (data: any)  onYes1(data);,onNo: function (data: any)  onNo1(data);,onError: function (data: any)  onError1(data);, "cfhvgjbhkjlkm");