在TypeScript中可以将强类型函数作为参数吗？

0wi1tuuw  于 2022-12-14  发布在  TypeScript
关注(0)|答案(9)|浏览(213)

在TypeScript中，我可以将函数的参数声明为Function类型。是否有我所缺少的“类型安全”的方法来实现这一点？例如，考虑以下情况：

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);

保存回调函数不是类型安全的，我给它一个回调函数，其中函数的参数是一个字符串，但我传递给它一个数字，并且编译时没有错误。我可以让save中的result参数成为类型安全的函数吗？
TL;DR版本：在TypeScript中是否存在.NET委托等效项？

typescript

9条答案

按热度按时间
pengsaosao

pengsaosao1#

当然，一个函数的类型由它的参数类型和返回类型组成，这里我们指定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 NumberCallback = (n: number) => any;

class Foo {
    // Equivalent
    save(callback: NumberCallback) : void {
        callback(42);
    }
}
赞(0）分享  回复(0）举报  2022-12-14
2w3kk1z5

2w3kk1z52#

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

interface Action<T>
{
    (item: T): void;
}

interface Func<T,TResult>
{
    (item: T): TResult;
}
赞(0）分享  回复(0）举报  2022-12-14
zbsbpyhn

zbsbpyhn3#

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

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

这当然与函数式编程范式一致。

赞(0）分享  回复(0）举报  2022-12-14
zhte4eai

zhte4eai4#

我知道这篇文章很老了，但是有一种更简洁的方法，它与所要求的方法略有不同，但可能是一种非常有用的替代方法。在调用方法时，你可以直接声明函数（在本例中是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()时，成功和失败的行为都可以在一个位置定义，这有助于将来的代码读者更清楚地理解。
一般来说，根据我的经验，这种方法有助于更简洁，更少混乱，整体上更清晰。
祝大家好运！

赞(0）分享  回复(0）举报  2022-12-14
mzmfm0qo

mzmfm0qo5#

在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) {
       // ...
    }

}
赞(0）分享  回复(0）举报  2022-12-14
jexiocij

jexiocij6#

如果首先定义函数类型，则它看起来像

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);
赞(0）分享  回复(0）举报  2022-12-14
5lhxktic

5lhxktic7#

因为你不能很容易地联合一个函数定义和另一个数据类型，所以我发现有这些类型对于强类型化它们很有用。

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>;
赞(0）分享  回复(0）举报  2022-12-14
qgelzfjb

qgelzfjb8#

除了其他人所说的，一个常见的问题是声明同一个重载函数的类型。典型的例子是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
赞(0）分享  回复(0）举报  2022-12-14
elcex8rz

elcex8rz9#

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");
赞(0）分享  回复(0）举报  2022-12-14
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com