TypeScript,函数(function)

在 TypeScript 中,function 是用于定义函数的关键字。它具有丰富的语法和功能,允许你声明函数的参数、返回类型以及函数体的实现。以下是一些关于 function 的基本用法和一些高级特性:

基本用法:

1. 函数声明

function add(x: number, y: number): number {
    return x + y;
}

在这个例子中,add 是一个函数,接受两个参数 xy,并返回它们的和。

第三个‘:number’指定了函数的返回类型,表示该函数返回一个 number 类型的值。

2. 箭头函数

const divide = (a: number, b: number): number => a / b;

箭头函数是一种更简洁的函数表达式语法。它自动继承外部作用域的 this,适合在回调函数或短小的函数体中使用。

3. 可选参数和默认参数:

function greet(name: string, greeting?: string): string {
    if (greeting) {
        return `${greeting}, ${name}!`;
    } else {
        return `Hello, ${name}!`;
    }
}

// 调用
console.log(greet("John")); // Hello, John!
console.log(greet("John", "Good morning")); // Good morning, John!

在这个例子中,greeting 参数是可选的,即调用时可以省略。如果不提供 greeting,函数会使用默认的问候语 "Hello"。

if (greeting) 的目的是检查是否提供了 greeting 参数。如果 greeting 存在(非假值),则执行 if 语句块内的逻辑,返回 ${greeting}, ${name}!。否则,执行 else 语句块内的逻辑,返回 Hello, ${name}!

4. 函数重载

function combine(a: string, b: string): string;
function combine(a: number, b: number): number;
function combine(a: any, b: any): any {
    return a + b;
}

// 调用
console.log(combine("Hello", " TypeScript")); // Hello TypeScript
console.log(combine(5, 10)); // 15

函数重载允许你为同一个函数提供多个类型的定义,以便根据不同的参数类型执行不同的逻辑。

5. 剩余参数:

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

// 调用
console.log(sum(1, 2, 3, 4, 5)); // 15

‘...numbers: number[]’ 使用了剩余参数语法,表示接受任意数量的参数,并将这些参数存储在名为 numbers 的数组中。

  • ‘...numbers’ 这部分使用了扩展运算符 ...,它将函数接收到的所有参数(剩余的参数)收集到一个数组中。在这个例子中,剩余的参数将被收集到名为 numbers 的数组中。

  • ‘;number[]’ 这部分是类型注解,指定了 numbers 的类型为 number[],即 numbers 是一个由数字组成的数组。

最后使用 reduce 方法计算它们的总和。

6. 箭头函数和 this:

箭头函数不会创建自己的 this 上下文,而是捕获其所在的上下文的 this。这在避免传统函数中的 this 指向问题上非常有用。

class Counter {
    value = 0;

    increment = () => {
        this.value++;
        console.log(this.value);
    };
}

const counter = new Counter();
counter.increment(); // 输出:1

在这个例子中,increment 方法是一个箭头函数,它捕获了所在上下文 Counter 实例的 this

‘= () => { ... }’ 这是箭头函数的语法,表示一个没有参数的箭头函数。箭头函数的主要特点包括:

  1. 箭头 ‘=> 表示函数的定义。

  2. () 括号中表示函数的参数列表,这里是空括号,表示该函数没有参数。

  3. ‘{ ... }’大括号中包含函数体,即函数要执行的代码。

  4. ‘this’指向当前的 Counter 实例,this.value表示初始化了一个名为 value 的成员变量,初始值为 0++ 这是递增运算符,它将变量的值加一。this.value++ 表示对 this(当前类的实例)的 value 属性进行递增操作,即将 value 的值加一。所以,当调用 counter.increment(); 时,执行了 increment 方法,其中的 this.value++value 的值从 0 递增到了 1。这样,value 表示了类 Counter 实例的状态,每次调用 increment 方法,它都会递增一次。