TypeScript函数：定义、调用和参数传递

引言

TypeScript 是一种静态类型的 JavaScript 超集，它有着更好的代码提示和错误检查能力。在 TypeScript 中，函数也是一个重要的概念，本文将介绍 TypeScript 函数的定义、调用和参数传递方法。

定义 TypeScript 函数

• 在 TypeScript 中，函数的定义方式和 JavaScript 相同，TypeScript 函数可以创建有名字的函数和匿名函数。

• 在定义 TypeScript 时需要指定函数的参数类型和返回值类型。例如，定义一个简单的函数，它接受两个数字参数并返回它们的和：

  function add(num1: number, num2: number): number {
      return num1 + num2;
  }
  

• 在这个函数中，我们指定了两个参数的类型（num1: number 和 num2: number），以及函数的返回值类型（: number）。

调用 TypeScript 函数

• 调用 TypeScript 函数与 JavaScript 函数相同，可以直接使用函数名和参数。例如，我们可以调用上面定义的 add 函数：

  const result = add(1, 2); // result 将是 3
  

• 在这个例子中，传递了两个数字参数 1 和 2，函数将它们相加后返回了结果 3。

函数类型

• 函数类型包含两部分：参数类型和返回值类型。

• 当写出完整函数类型的时候，这两部分都是需要的。

• 以参数列表的形式写出参数类型，为每个参数指定一个名字和类型。（这个名字只是为了增加可读性）。

• 完整的函数类型：

  let myAdd: (baseValue: number, increment: number) => number = function(x: number, y: number): number {
      return x + y;
  };
  

推断类型

• 在赋值语句的一边指定了类型但是另一边没有类型的话，TypeScript编译器会自动识别出类型。

  // myAdd has the full function type
  let myAdd = function(x: number, y: number): number { return x + y; };
  
  // The parameters `x` and `y` have the type number
  let myAdd: (baseValue: number, increment: number) => number =
      function(x, y) { return x + y; };
  

参数传递

• 在 TypeScript 中，函数参数传递有多种方式，包括可选参数、默认参数、剩余参数以及函数重载。

可选参数

• 可选参数表示在调用函数时可以不传递该参数。在 TypeScript 中，使用问号 ? 标记一个参数为可选参数。例如，定义一个计算矩形面积的函数：

  function calculateRectangleArea(width: number, height?: number): number {
      if (height) {
          return width * height;
      } else {
          return width * width;
      }
  }
  

• 在这个函数中，第二个参数 height 被标记为可选参数，即调用函数时可以传递或者不传递该参数。如果传递了 height，则计算矩形的面积并返回结果；否则，将 width 当做边长计算正方形的面积并返回结果。

默认参数

• 默认参数表示在调用函数时如果不传递该参数，将使用指定的默认值。在 TypeScript 中，使用等号 = 指定一个参数的默认值。例如，定义一个打印消息的函数：

  function showMessage(message: string = 'Hello'): void {
      console.log(message);
  }
  

• 在这个函数中，我们指定了参数 message 的默认值为 'Hello'，如果调用函数时不传递该参数，则使用默认值。例如：

  showMessage(); // 输出 'Hello' showMessage('World'); // 输出 'World'
  

剩余参数

• 剩余参数表示在调用函数时可以传递任意数量的参数，并将它们放在一个数组中。在 TypeScript 中，使用三个点 ... 标记一个参数为剩余参数。例如，定义一个计算多个数字之和的函数：

  function sum(...numbers: number[]): number {
      let total = 0;
      for (const num of numbers) {
          total += num;
      }
      return total;
  }
  

• 在这个函数中，我们使用剩余参数 ...numbers 接收任意数量的数字参数，并计算它们的和。

this

• 众所周知，在 JavaScript 中，this 的指向问题就是一件特别重要但是又很难的一件事情，在 TypeScript 中依然需要花心思在学习 this 的指向上。但在 TypoScript 中，有一件很幸福的事情是，TypeScript 在编译的时候会告诉开发者错误使用 this 的地方，不需要开发者绞尽脑汁去看代码。

• JavaScript 里，this的值在函数被调用的时候才会指定，这是个既强大又灵活的特点，但是开发者需要花点时间弄清楚函数调用的上下文是什么，尤其是在返回一个函数或将函数当做参数传递的时候，会很难。

• 这部分内容如果不太明白的话，可以参考 JavaScript 的 this 指向，因为 JavaScript 和 TypeScript 中 this 的作用是一样的。

函数重载

• 函数重载表示根据传递的参数类型和数量不同，使用不同的函数实现。在 TypeScript 中，可以使用函数重载声明来定义多个函数实现。例如，定义一个文本处理函数：

  function processText(text: string): string;
  function processText(numbers: number[]): number[];
  function processText(value: string | number[]): string | number[] {
      if (typeof value === 'string') {
          return value.toUpperCase();
      } else {
          return value.map(num => num * 2);
      }
  }
  

• 在这个函数中，我们定义了两个函数实现。当传递的参数是字符串类型时，将其转换为大写并返回；当传递的参数是数字数组类型时，将其中的数字都乘以 2 并返回。

总结

本文介绍了 TypeScript 函数的定义、调用和参数传递方法。通过学习这些知识，可以更好地理解 TypeScript 中的函数概念，并使用 TypeScript 开发更可靠、可维护的程序。

代码007普通

打赏 收藏 海报 链接