返回

深入探讨 TypeScript 中函数的定义和调用

前端

函数定义

在 TypeScript 中,函数使用 function 定义。函数名称后面跟着圆括号,其中包含参数列表,后面跟着冒号和函数的返回值类型。函数体用花括号包围。

function add(a: number, b: number): number {
  return a + b;
}

本地函数 是在模块或类之外定义的函数。它们只在定义它们的模块中可见。

导入函数 是从另一个模块导入的函数。它们可以使用 import 语句导入。

import { add } from "./math";

类方法 是定义在类中的函数。它们可以通过类实例访问。

class Person {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

函数作为值

函数在 TypeScript 中是值。这意味着它们可以像其他值一样赋值给变量、传递给函数并返回为其他函数的结果。

const sum = function(a: number, b: number): number {
  return a + b;
};

const result = sum(1, 2);

参数

函数的参数是函数定义中圆括号内的变量。它们可以是任何类型,包括其他函数。

function add(a: number, b?: number): number {
  if (b === undefined) {
    return a;
  }

  return a + b;
}

可选参数 是可以不传递给函数的参数。它们使用问号 (?) 表示。

默认参数 是在函数定义中为参数赋予默认值的可选参数。

function add(a: number, b = 10): number {
  return a + b;
}

剩余参数 是允许函数接受任意数量参数的参数。它们使用三个点 (...) 表示。

function add(...numbers: number[]): number {
  return numbers.reduce((a, b) => a + b, 0);
}

返回值

函数的返回值是函数定义中的冒号后的类型。如果函数没有明确指定返回值类型,则它返回 any 类型。

function add(a: number, b: number): number {
  return a + b;
}

类型注释

TypeScript 函数的类型注释提供了函数参数和返回值的类型信息。它们对于文档化代码和帮助 TypeScript 编译器进行类型检查非常有用。

/**
 * Adds two numbers together.
 *
 * @param a The first number.
 * @param b The second number.
 * @returns The sum of the two numbers.
 */
function add(a: number, b: number): number {
  return a + b;
}

函数重载

函数重载允许使用不同数量或类型参数定义具有相同名称的多个函数。这对于创建具有多种用途的通用函数非常有用。

function add(a: number, b: number): number;
function add(a: string, b: string): string;

function add(a: any, b: any): any {
  return a + b;
}

箭头函数

箭头函数是使用箭头 (=>) 符号定义的匿名函数。它们可以用来简化不需要明确名称的函数的定义。

const add = (a: number, b: number) => a + b;

立即执行函数表达式 (IIFE)

IIFE 是立即执行的函数表达式。它们通常用于在脚本加载时立即执行代码。

(function() {
  console.log("Hello, world!");
})();

结论

函数是 TypeScript 中的基本构件。它们可以用于各种目的,例如执行计算、处理数据和控制程序流。通过了解函数的定义和调用,开发人员可以有效地使用 TypeScript 构建健壮可靠的应用程序。