🖱️函数

匿名函数

匿名函数在 TypeScript 被执行的时候，该函数的参数类型会自动根据调用者的类型被分配。

const names = ["Alice", "Bob", "Eve"];

names.forEach(function (s) {
  console.log(s.toLowerCase());
});

上述事例中，参数并没有指定明确的类型注解，但是它根据调用者的类型被分配为 string 类型。

函数参数

函数中的每一个参数都必须要指定它的类型，以便调用者传递正确的参数类型。

function printToConsole(value: number, key: string) {
  return { value, key };
}

上述事例中我们我们为函数的两个参数指定了类型，这样调用者就能够按照类型提示传递正确的参数。

但是我们并没有指定返回值的类型，通常情况下 TypeScript 会根据其语句推断出函数的返回类型。你也可以手动添加返回值类型。

function printToConsole(
  value: number,
  key: string
): { value: number; key: string } {
  return { value, key };
}

// 这样写起来显得有些太长了，我们将返回值单独拎出来

type ReturnType = { value: number; key: string };

function printToConsole(value: number, key: string): ReturnType {
  return { value, key };
}

约束参数范围

约束参数范围，一般出现在使用泛型的情况下。有时候我们希望调用者能够自主的控制参数类型的情况下就会使用泛型，但是又希望参数类型在可控范围之内。

function printToConsole<Type extends { length: number }>(params: Type) {
  return params.length >= 0;
}

printToConsole({ name: "", length: 20 });

printToConsole([1, 2, 3]);

printToConsole("hello world");

在上述示例中，我们传递的参数必须要包含 length 这个属性。因此我们可以传递 array、string 等包含 length 属性的参数。

错误的用法

这是编写类型约束时最常见的错误：

function minimumLength<Type extends { length: number }>(
  obj: Type,
  minimum: number
): Type {
  if (obj.length >= minimum) {
    return obj;
  } else {
    return { length: minimum }; // 不能将类型“{ length: number; }”分配给类型“Type”。 // "{ length: number; }" 可赋给 "Type" 类型的约束，但可以使用约束 "{ length: number; }" 的其他子类型实例化 "Type"。
  }
}

这个函数看起来貌似没有问题，但是仅仅与一些约束相匹配，如果你执行下面的写法，那么它指定是与类型注解不符合的。

const arr = minimumLength([1, 2], 3);

按照执行结果，它应该返回{object: 2}，但是按照类型注解，它的返回值类型应该是array，这是相互冲突的，也就是说，在这种情况下，该类型注解并不是安全的。

指定类型参数

TypeScript 通常可以在泛型调用中推断出预期的类型参数，但并非总是如此，例如：

function combine<Type>(arr1: Type[], arr2: Type[]): Type[] {
  return arr1.concat(arr2);
}

const arr = combine([1, 2, 3], ["helo"]);

//  Type 'string' is not assignable to type 'number'

如果你想要解决该错误，你可以手动指定 Type

const arr = combine<string | number>([1, 2, 3], ["helo"]);

可选参数

在声明函数时，通常会有一部分参数时可传可不传的，在 TypeScript 中，对于那些可选参数我们使用?标记：

function f(x: number, y: number, z?: number) {
  /* ...... */
}

上述示例中，我们通过?标记z为可选参数，并制定类型为number，但 z 参数实际上具有类型number｜undefined，因为 JavaScript 中为制定的参数默认值undefined。

可选参数的位置是放在必选参数的后面的。

函数类型参数

函数也可以作为参数传递给函数，定义一个函数类型最简单的方法就是使用函数类型表达式。语法上类似于箭头函数：

// 👉 定义一个参数为 number 类型，没有返回值的函数类型

type FunType = (num: number) => void;

function greeter(fn: FunType) {
  fn(10);
}

function printToConsole(params: number) {
  console.log(params);
}

greeter(printToConsole);

当一个函数没有返回值时，我们可以通过viod来注解它的返回值类型。

剩余参数

除了接受固定的参数之外，我们还可以使用剩余参数定义接受无限数量的函数

function multiply(n: number, ...m: number[]) {

 return m.map((x) => n \* x);

}

// 'a' gets value [10, 20, 30, 40]

const a = multiply(10, 1, 2, 3, 4);

在 TypeScript 中，这些参数上类型注解是隐式`any[]`

函数重载

函数泛型

箭头函数泛型的几种表示方法

const foo = <T,>(x: T): T => x;

const foo = <T extends {}>(x: T): T => x;

const foo = <T extends Record<string, unknown>>(x: T): T => x;

const foo: <T>(x: T) => T = x => x;

const identity = <T,>(arg: T): T => {
    console.log(arg);
    return arg;
};

const renderAuthorize = <T>(Authorized: T): ((currentAuthority: CurrentAuthorityType) => T) => (
    currentAuthority: CurrentAuthorityType,
  ): T => {
     return
 };
————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/weixin_45389051/article/details/118250554

这有帮助吗？