TypeScript 箭头函数

注意: 如果您是 TypeScript 新手，请先查看我们的 TypeScript 入门 教程。

TypeScript 箭头函数是一种简洁的函数表达式语法，支持类型注解。

// An arrow function to add two numbers
const addNumbers = (a: number, b: number): number => a + b;

// Call the function with two numbers
const result: number = addNumbers(5, 3);
console.log(result);

// Output: 8

箭头函数语法

箭头函数的语法是

let myFunction = (arg1: Type1, arg2: Type2, ...argN: TypeN): ReturnType => {
    statement(s)
}

这里，

• myFunction - 函数的名称。
• arg1, arg2, ...argN - 函数的参数。
• statement(s) - 函数体。
• ReturnType - 函数的返回类型（可选）。

如果函数体只有一条语句或一个表达式，您可以这样写箭头函数：

let myFunction = (arg1: Type1): ReturnType => expression;

请注意，在这种情况下我们没有使用花括号 {}。这是因为上述语法是一种快捷方式，不需要花括号或 return 语句。

// Regular function 
let multiply = function(x: number, y: number): number {
    return x * y;
};

// Arrow function
let multiply = (x: number, y: number): number => x * y;

箭头函数的隐式返回

箭头函数的快捷形式不需要 return 语句来返回值。

相反，它会隐式返回函数体中表达式的结果值。例如，

// Arrow function that returns the product of two numbers
let multiply = (x: number, y: number): number => x * y;

console.log(multiply(9, 5));

// Output: 45

当使用花括号时，使用“return”

但是，如果您不使用快捷形式，即在箭头函数中使用花括号 {}，则需要使用 return 语句。

在这种情况下不使用 return 语句将导致箭头函数返回 undefined。例如，

// Using the return statement
let multiply = (x: number, y: number) => {
    return x * y;
}

// Omitting the return statement
let divide = (x: number, y: number) => {
    x / y;
}

console.log(multiply(9, 5));  // Output: 45
console.log(divide(9, 5));  // Output: undefined

正如您所见，divide() 函数返回了 undefined，因为它是一个使用花括号 {} 但没有 return 语句的箭头函数。

您可以通过添加 return 语句或使用快捷形式来解决此问题

// Valid: Using the return statement
let divide = (x: number, y: number) => {
    return x / y;
}

// Valid: Using the shorthand form
// No curly braces or the return statement
let divide = (x: number, y: number) => x / y;

示例 1：不带参数的箭头函数

如果一个函数不接受任何参数，那么您应该使用空括号。例如，

const sayHello = (): string => "Hello, World!";

// Call the arrow function and print its return value
console.log(sayHello());  

// Output: Hello, World!

在此示例中，当调用 sayHello() 时，它会执行箭头函数，该函数返回字符串 Hello, World!。

示例 2：带一个参数的箭头函数

const square = (x: number): number => x * x;

// Use the arrow function to square a number
console.log(square(5));

// Output: 25
 

箭头函数 square() 接受一个参数 x 并返回它的平方。

因此，调用 square() 并传入值 5 返回 25。

this 关键字与箭头函数

在 常规函数 中，this 关键字通常指向调用它的函数。

然而，this 与箭头函数无关。因此，无论何时调用 this，它都指向其父作用域。

让我们通过比较 this 在常规函数和箭头函数中的行为来阐明这一点。

在常规函数中

// Constructor function to create Person object
function Person(this: any) {
    this.name = "Jack";
    this.age = 25;

    this.sayName = function () {

        // this is accessible
        console.log(this.age);

        function innerFunc(this: any) {

            // this refers to the global object and is not accessible
            console.log(this.age);
            console.log(this);
        }

        innerFunc();
    }
}

let x = new (Person as any)();
x.sayName();

输出

25
undefined
<ref *1> Object [global] {...}

在这里，this.sayName() 中的 this.age 是可访问的，因为 this.sayName() 是一个对象的成员函数。

然而，innerFunc() 是一个普通函数，并且 this.age 不可访问，因为 this 指的是全局对象。

因此，innerFunc() 函数中的 this.age 是 undefined。

在箭头函数中

// Constructor function
function Person(this: any) {
    
    this.name = 'Jack';
    this.age = 25;
    this.sayName = function () {

        console.log(this.age);

        let innerFunc = (): void => {
            console.log(this.age);
        }

        innerFunc();
    }
}

const x = new (Person as any)();
x.sayName();

输出

25
25

这里，innerFunc() 是一个箭头函数。

在箭头函数内部，this 指向父作用域，即 Person 对象的范围。因此，this.age 返回 25。

let age: number = 5;

// Use arrow functions as expressions in ternary operator 
// to dynamically assign functionality
let welcome: () => void = (age < 18) ?
    () => console.log("Child") :
    () => console.log("Adult");

welcome(); 


// Output: Child

let sum = (a: number, b: number): number => {
    let result = a + b;
    return result;
};

let result1: number = sum(5, 7);
console.log(result1);

// Output: 12

let person = {
    name: "Jack",
    age: 25,

    sayName: () => {
        console.log(this.age);  
    }
}

person.sayName(); 

// Output: undefined

let Foo = (): void => {};
let foo = new (Foo as any)();

// Output: TypeError: Foo is not a constructor

另请阅读

• TypeScript 对象类型
• TypeScript 构造函数