面试题：TypeScript中箭头函数作为函数类型的使用场景

Question

请描述在TypeScript中，箭头函数作为函数类型参数传递的常见使用场景，并给出一个示例代码。同时说明箭头函数相较于普通函数在这种场景下的优势。

Answer 1

常见使用场景

1. 回调函数场景：在许多JavaScript库或内置函数中，经常需要传入回调函数来处理异步操作的结果、事件处理等。在TypeScript中，使用箭头函数作为回调函数类型参数传递，能使代码更加简洁。例如Array.prototype.map、Array.prototype.filter等数组方法，需要传入一个函数来对数组元素进行操作。
2. 事件绑定场景：在Web开发中，为DOM元素绑定事件处理函数时，箭头函数可以方便地作为参数传递，同时它能更好地处理this的指向问题。

示例代码

// 定义一个接受函数类型参数的函数
function processArray(arr: number[], callback: (num: number) => number): number[] {
    return arr.map(callback);
}

// 使用箭头函数作为参数传递
const numbers = [1, 2, 3, 4];
const result = processArray(numbers, num => num * 2);
console.log(result); 

箭头函数相较于普通函数的优势

1. 简洁性：箭头函数的语法更加简洁，特别是在处理简单的回调逻辑时，不需要使用function关键字、return关键字（当函数体只有一个表达式时），使代码更加紧凑。例如上面示例中num => num * 2比普通函数function(num) { return num * 2; }简洁很多。
2. this指向：箭头函数没有自己的this，它的this指向定义时所在的作用域，而不是调用时的作用域。这在回调函数场景中非常有用，因为普通函数在作为回调函数传递时，this的指向可能会因为调用方式的不同而改变，导致一些难以调试的问题，而箭头函数能避免这种情况。