Typescript:如何为方法参数中使用的函数回调(如任何函数类型,而不是通用任何函数)定义类型

Question

目前我的类型定义为:

interface Param {
    title: string;
    callback: any;
}

我需要这样的东西:

interface Param {
    title: string;
    callback: function;
}

但第二个不被接受.

Answer 1

全局类型Function用于此目的.

此外,如果您打算使用0个参数调用此回调并忽略其返回值,则该类型将() => void匹配所有不带参数的函数.

Answer 2

v1.4中的Typescript具有type声明类型别名的关键字(类似于typedefC/C++中的a).您可以声明您的回调类型:

type CallbackFunction = () => void;

它声明了一个不带参数的函数,并且不返回任何内容.接受任何类型的零个或多个参数并且不返回任何内容的函数将是:

type CallbackFunctionVariadic = (...args: any[]) => void;

然后你可以说,例如,

let callback: CallbackFunctionVariadic = function(...args: any[]) {
  // do some stuff
};

如果你想要一个带有任意数量参数并返回任何东西的函数(包括void):

type CallbackFunctionVariadicAnyReturn = (...args: any[]) => any;

您可以指定一些必需参数,然后指定一组其他参数(比如一个字符串,一个数字,然后是一组额外的参数),因此:

type CallbackFunctionSomeVariadic =
  (arg1: string, arg2: number, ...args: any[]) => void;

这对于像EventEmitter处理程序这样的东西很有用.

函数可以以这种方式强烈地输入,尽管如果你试图用类型别名来解决所有问题,你可能会被带走并遇到组合问题.

Answer 3

根据Ryan的回答,我认为您正在寻找的界面定义如下:

interface Param {
    title: string;
    callback: () => void;
}

Answer 4

定义函数类型的方法有很多种；然而，有些比其他更好。

尽管可以使用FunctionJavaScript 函数对象，但不要这样做。
来源：TypeScript ESLint 插件推荐规则ban-types

• 避免使用 Function 类型，因为它提供的安全性很低，原因如下：
  • 它在调用值时不提供类型安全，这意味着很容易提供错误的参数。
  • 它接受类声明，但调用时会失败，因为它们是在没有 new 关键字的情况下调用的。

TypeScript 支持多种其他方式。例如，函数类型表达式。该方法与箭头函数非常相似。

如果已知参数和返回值具有某种形式，那么应该对它们进行类型化。回调 应该是这种情况。
例如，

interface Param {
  callback: (foo: string, bar: number) => void
}

请注意，这些类型可以根据需要变得复杂，例如使用对象类型或从其他类型创建的类型。

如果类型确实未知，则unknown优先选择any.
来源：TypeScript ESLint 插件推荐规则no-explicit-any

使用时any，将忽略围绕该值的所有编译器类型检查。

从 TS 文档中，

unknown是 的类型安全对应项any。

因此，使用扩展语法，

interface Param {
  callback: (...args: unknown[]) => unknown
}

Answer 5

这是一个接受回调的函数示例

const sqk = (x: number, callback: ((_: number) => number)): number => {
  // callback will receive a number and expected to return a number
  return callback (x * x);
}

// here our callback will receive a number
sqk(5, function(x) {
  console.log(x); // 25
  return x;       // we must return a number here
});

如果你不关心回调的返回值(大多数人不知道如何以任何有效的方式使用它们),你可以使用 void

const sqk = (x: number, callback: ((_: number) => void)): void => {
  // callback will receive a number, we don't care what it returns
  callback (x * x);
}

// here our callback will receive a number
sqk(5, function(x) {
  console.log(x); // 25
  // void
});

注意,我用于callback参数的签名......

const sqk = (x: number, callback: ((_: number) => number)): number

我会说这是TypeScript缺陷,因为我们需要为回调参数提供一个名称.在这种情况下我使用,_因为它在sqk函数内部不可用.

但是,如果你这样做

// danger!! don't do this
const sqk = (x: number, callback: ((number) => number)): number

它是有效的 TypeScript,但它会被解释为......

// watch out! typescript will think it means ...
const sqk = (x: number, callback: ((number: any) => number)): number

即,TypeScript会认为参数名称是number隐含的类型any.这显然不是我们想要的,但唉,这就是TypeScript的工作原理.

因此,在键入函数参数时不要忘记提供参数名称......看似愚蠢.

Answer 6

您可以通过各种方式在界面中定义函数类型,

1. 一般方式:

export interface IParam {
  title: string;
  callback(arg1: number, arg2: number): number;
}

2. 如果你想使用属性语法,那么,

export interface IParam {
  title: string;
  callback: (arg1: number, arg2: number) => number;
}

3. 如果先声明函数类型,

type MyFnType = (arg1: number, arg2: number) => number;

export interface IParam {
  title: string;
  callback: MyFnType;
}

使用非常直接,

function callingFn(paramInfo: IParam):number {
    let needToCall = true;
    let result = 0;
   if(needToCall){
     result = paramInfo.callback(1,2);
    }

    return result;
}

4. 您也可以声明一个函数类型文字,这意味着函数可以接受另一个函数作为它的参数.参数化函数也可以作为回调调用.

export interface IParam{
  title: string;
  callback(lateCallFn?:
             (arg1:number,arg2:number)=>number):number;

}

Answer 7

有四种抽象函数类型，当您知道函数是否接受参数、是否返回数据时，您可以分别使用它们。

export declare type fEmptyVoid = () => void;
export declare type fEmptyReturn = () => any;
export declare type fArgVoid = (...args: any[]) => void;
export declare type fArgReturn = (...args: any[]) => any;

像这样：

public isValid: fEmptyReturn = (): boolean => true;
public setStatus: fArgVoid = (status: boolean): void => this.status = status;

为了仅使用一种类型作为任何函数类型，我们可以将所有抽象类型组合在一起，如下所示：

export declare type fFunction = fEmptyVoid | fEmptyReturn | fArgVoid | fArgReturn;

然后像这样使用它：

public isValid: fFunction = (): boolean => true;
public setStatus: fFunction = (status: boolean): void => this.status = status;

在上面的例子中，一切都是正确的。但是从大多数代码编辑器的角度来看，下面的用法示例是不正确的。

// you can call this function with any type of function as argument
public callArgument(callback: fFunction) {

    // but you will get editor error if call callback argument like this
    callback();
}

正确的编辑调用是这样的：

public callArgument(callback: fFunction) {

    // pay attention in this part, for fix editor(s) error
    (callback as fFunction)();
}

Answer 8

希望这会有所帮助...

interface Param {
    title: string;
    callback: (error: Error, data: string) => void;
}

或者在一个函数中

let myfunction = (title: string, callback: (error: Error, data: string) => void): string => {

    callback(new Error(`Error Message Here.`), "This is callback data.");
    return title;

}

Answer 9

打字稿：如何为方法参数中使用的函数回调定义类型？

您可以将回调声明为 1)函数属性或 2)方法：

interface ParamFnProp {
    callback: (a: Animal) => void; // function property
}

interface ParamMethod {
    callback(a: Animal): void; // method
}

自TS 2.6以来，有一个重要的类型差异：

当一个函数属性被声明时，你会在--strictor--strictFunctionTypes模式中获得更强的（“声音”）类型。让我们举个例子：

const animalCallback = (a: Animal): void => { } // Animal is the base type for Dog
const dogCallback = (d: Dog): void => { } 

// function property variant
const param11: ParamFnProp = { callback: dogCallback } // error: not assignable
const param12: ParamFnProp = { callback: animalCallback } // works

// method variant
const param2: ParamMethod = { callback: dogCallback } // now it works again ...

从技术上说，方法是双变量和函数属性逆变下他们的观点strictFunctionTypes。方法仍然被更宽松地检查（即使不是健全的），以便与内置类型（如Array.

概括

• 函数属性和方法声明之间存在类型差异
• 如果可能，为更强的类型选择一个函数属性

游乐场示例代码