TypeScript 函数

在 TypeScript 中，函数是一段可以执行特定任务的代码块，并且可以被重复调用。函数不仅提高了代码的可重用性，还使得代码更加模块化和易于维护。TypeScript 作为 JavaScript 的一个超集，在函数方面提供了丰富的功能和类型检查。

一、函数的基本语法

TypeScript 函数的定义与 JavaScript 非常相似，但增加了类型注解的功能。

// 无参数无返回值的函数
function sayHello() {
    console.log("Hello, World!");
}

// 有参数无返回值的函数
function greet(name: string) {
    console.log("Hello, " + name + "!");
}

// 有参数有返回值的函数
function add(a: number, b: number): number {
    return a + b;
}

二、函数类型

在 TypeScript 中，你可以为函数定义类型，这有助于在编写代码时获得更好的类型检查。

// 定义一个函数类型
type AddFunctionType = (a: number, b: number) => number;

// 定义一个符合该类型的函数
let addFunction: AddFunctionType = function(x: number, y: number): number {
    return x + y;
};

三、可选参数和默认参数

TypeScript 支持可选参数和默认参数，这使得函数更加灵活。

// 可选参数（使用 ? 标记）
function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + " " + lastName;
    } else {
        return firstName;
    }
}

// 默认参数
function multiply(a: number, b: number = 1): number {
    return a * b;
}

四、剩余参数

当你不确定要传递给函数多少个参数时，可以使用剩余参数（...args）来收集所有传递给函数的参数。

function sum(...numbers: number[]): number {
    return numbers.reduce((prev, curr) => prev + curr, 0);
}

五、箭头函数

箭头函数提供了一种更简洁的方式来编写函数表达式，并且它们不绑定自己的 this，arguments，super，或 new.target。箭头函数非常适合用作回调函数和匿名函数。

let numbers = [1, 2, 3];

// 使用箭头函数作为数组的 map 方法回调
let doubled = numbers.map((number: number) => number * 2);
console.log(doubled); // 输出 [2, 4, 6]

六、函数重载

TypeScript 支持函数重载，即同一个函数名可以有多个函数签名。编译器会根据提供的参数数量和类型来选择最匹配的函数签名。

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
    if (typeof a === "number" && typeof b === "number") {
        return a + b;
    } else if (typeof a === "string" && typeof b === "string") {
        return a + b;
    } else {
        throw new Error("Unsupported types for add function.");
    }
}

七、使用函数的注意事项

1、类型注解：

尽量为函数参数和返回值添加类型注解，以提高代码的可读性和健壮性。

2、避免副作用：

函数应该尽量做到单一职责，避免在函数内部执行与函数主要任务无关的操作，以减少副作用。

3、命名规范：

使用清晰、描述性的函数名，以便其他开发者能够理解函数的作用。

4、箭头函数与 this：

注意箭头函数不绑定自己的 this，如果你需要在函数内部使用 this 引用当前对象，请确保使用普通函数。

通过掌握这些函数相关的概念和技巧，你可以在 TypeScript 中编写出更加高效、可维护和易于理解的代码。

本文地址：https://www.tides.cn/p_typescript-functions