TypeScript 箭头函数
介绍
在 TypeScript 中，箭头函数（Arrow Function）是一种简洁的函数表达式语法，它使用 => 符号来定义函数。箭头函数不仅简化了函数的书写方式，还解决了传统函数中 this 指向的问题。对于初学者来说，掌握箭头函数是学习 TypeScript 的重要一步。
基本语法
箭头函数的基本语法如下：
typescript
const functionName = (param1: type, param2: type): returnType => {
// 函数体
return result;
};
例如，定义一个简单的箭头函数来计算两个数字的和：
typescript
const add = (a: number, b: number): number => {
return a + b;
};
console.log(add(2, 3)); // 输出: 5
提示
如果函数体只有一行代码，可以省略 {} 和 return 关键字，直接返回结果：
typescript
const add = (a: number, b: number): number => a + b;
箭头函数的特性
1. 简洁的语法
箭头函数的语法比传统函数更简洁，尤其是在处理单行函数时。例如，传统函数写法：
typescript
function add(a: number, b: number): number {
return a + b;
}
使用箭头函数可以简化为：
typescript
const add = (a: number, b: number): number => a + b;
2. 没有自己的 this
箭头函数没有自己的 this，它会捕获其所在上下文的 this 值。这使得箭头函数在处理回调函数时非常有用，尤其是在类方法中。
例如，以下代码展示了传统函数和箭头函数在 this 指向上的区别：
typescript
class Counter {
count = 0;
increment() {
setTimeout(function() {
// 这里的 this 指向全局对象（如 window），而不是 Counter 实例
this.count++;
console.log(this.count); // 输出: NaN
}, 1000);
}
incrementArrow() {
setTimeout(() => {
// 这里的 this 指向 Counter 实例
this.count++;
console.log(this.count); // 输出: 1
}, 1000);
}
}
const counter = new Counter();
counter.increment(); // 输出: NaN
counter.incrementArrow(); // 输出: 1
警告
在箭头函数中，this 的值是固定的，无法通过 call、apply 或 bind 方法改变。
3. 没有 arguments 对象
箭头函数没有自己的 arguments 对象，但可以通过剩余参数（rest parameters）来获取所有参数：
typescript
const sum = (...args: number[]): number => {
return args.reduce((acc, val) => acc + val, 0);
};
console.log(sum(1, 2, 3)); // 输出: 6
实际应用场景
1. 回调函数
箭头函数常用于回调函数中，尤其是在处理异步操作时。例如，使用 Promise 时：
typescript
const fetchData = (): Promise<string> => {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Data fetched!");
}, 1000);
});
};
fetchData().then((data) => {
console.log(data); // 输出: Data fetched!
});
2. 数组方法
箭头函数与数组方法（如 map、filter、reduce 等）结合使用，可以简化代码：
typescript
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // 输出: [2, 4, 6, 8, 10]
const evens = numbers.filter((num) => num % 2 === 0);
console.log(evens); // 输出: [2, 4]
3. 类方法
在类方法中使用箭头函数可以避免 this 指向问题：
typescript
class Timer {
seconds = 0;
start() {
setInterval(() => {
this.seconds++;
console.log(this.seconds);
}, 1000);
}
}
const timer = new Timer();
timer.start(); // 每秒输出递增的数字
总结
TypeScript 中的箭头函数是一种简洁且强大的工具，它不仅简化了函数的书写方式，还解决了传统函数中 this 指向的问题。通过本文的学习，你应该已经掌握了箭头函数的基本语法、特性以及实际应用场景。
备注
附加资源：
提示
练习：
- 尝试将以下传统函数改写为箭头函数：
typescript
function multiply(a: number, b: number): number {
return a * b;
} - 使用箭头函数实现一个
filter方法，过滤出数组中所有大于 10 的数字。