在TypeScript中是否可以将强类型函数作为参数?


558

在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委托?

Answers:


802

当然。函数的类型由其参数的类型及其返回类型组成。在这里,我们指定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);
    }
}

6
(n: number) => any意味着任何功能签名?
尼克·黄(Nikk Wong)2016年

16
@nikkwong表示该函数采用一个参数(a number),但返回类型完全不受限制(可以是任何值,甚至void
不限

16
什么是点n在这个语法?仅输入和输出类型就不够吗?
玉环姜

4
使用内联函数与命名函数(在下面的答案与该答案)之间的副作用是,命名函数未定义“ this”变量,而在内联函数中定义了该变量。对于JavaScript编码人员而言,这并不奇怪,但对于其他编码背景而言绝对不是显而易见的。
Stevko '17

3
@YuhuanJiang 这篇文章可能是你的兴趣
奥迪安

93

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

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

interface Func<T,TResult>
{
    (item: T): TResult;
}

2
看起来很有用,但实际使用此类类型将是一种反模式。无论如何,那些看起来更像Java SAM类型而不是C#委托。当然不是,它们等效于类型别名形式,后者对于函数而言更为优雅
Aluan Haddad

5
@AluanHaddad您能详细说明为什么您会认为这是一种反模式吗?
Max R McCarty's

8
原因是TypeScript具有简洁的函数类型文字语法,从而避免了此类接口的需要。在C#中,委托是名义上的,但是ActionFunc委托都消除了对特定委托类型的大部分需求,有趣的是,使C#具有结构化类型的相似性。这些代表的缺点是他们的名字没有任何意义,但其他优势通常胜于此。在TypeScript中,我们根本不需要这些类型。因此,反模式将是function map<T, U>(xs: T[], f: Func<T, U>)。更喜欢function map<T, U>(xs: T[], f: (x: T) => U)
Aluan Haddad'5

6
这是一种品味问题,因为这些语言在没有运行时类型的语言中是等效形式。如今,您还可以使用类型别名代替接口。
德鲁·诺阿克斯

18

我知道这篇文章很陈旧,但是有一个更紧凑的方法,它与要求的内容略有不同,但是可能是一个非常有用的选择。调用方法(当你基本上可以在线声明函数Foosave()在这种情况下)。它看起来像这样:

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()调用时,可以在一处定义成功和失败的行为,这使以后的代码阅读器更加清楚。

通常,根据我的经验,这种方法可以使自己更简洁,更整洁,整体更清晰。

祝你好运!


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

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

这肯定符合功能编程范例。


6
您应该调用它inputType而不是它returnType,不是吗?您将参数传递给函数inputType的类型在哪里。datacallback
ChrisW '18

是的@ChrisW你是正确的,inputType更有意义。谢谢!
克里希纳·加内里瓦尔

2

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

}

1

如果您首先定义函数类型,那么它将看起来像

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

除了别人所说的以外,一个常见的问题是声明重载的同一函数的类型。典型的情况是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
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.