TypeScript 函数基础与高级用法详解

函数基础

函数定义与声明

在TypeScript中，函数的定义和JavaScript类似，但增加了类型注解。函数定义有两种常见方式：函数声明和函数表达式。

函数声明：

function add(a: number, b: number): number {
    return a + b;
}

在这个例子中，add 函数接受两个 number 类型的参数 a 和 b，并返回一个 number 类型的值。参数和返回值的类型都被明确注解。

函数表达式：

const subtract = function (a: number, b: number): number {
    return a - b;
};

这里使用函数表达式定义了 subtract 函数，同样对参数和返回值进行了类型注解。需要注意的是，函数表达式可以赋值给一个变量，变量的类型会自动推断为函数类型。

函数参数

必选参数：前面例子中的 add 和 subtract 函数的参数都是必选参数。在调用函数时，必须提供这些参数，否则会报错。
```
function greet(name: string) {
    console.log(`Hello, ${name}!`);
}
greet(); // 报错，缺少必选参数name
greet('John'); // 正确调用
```

可选参数：在参数名后加上 ? 表示该参数是可选的。

function greetOptional(name?: string) {
    if (name) {
        console.log(`Hello, ${name}!`);
    } else {
        console.log('Hello!');
    }
}
greetOptional(); // 正确调用，输出Hello!
greetOptional('Jane'); // 正确调用，输出Hello, Jane!

默认参数：可以给参数提供默认值。当调用函数时没有传递该参数，就会使用默认值。

function greetDefault(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}
greetDefault(); // 输出Hello, Guest!
greetDefault('Bob'); // 输出Hello, Bob!

剩余参数：有时候我们不知道函数会接收多少个参数，可以使用剩余参数。剩余参数使用 ... 语法，它会将所有剩余的参数收集到一个数组中。
```
function sum(...numbers: number[]): number {
    return numbers.reduce((acc, num) => acc + num, 0);
}
const result = sum(1, 2, 3);
console.log(result); // 输出6
```

函数返回值

函数返回值的类型在函数定义中通过 : 来指定。如果函数没有返回值（例如只执行一些副作用操作，如打印日志），可以使用 void 类型。

function printMessage(message: string): void {
    console.log(message);
}

如果函数永远不会正常返回（例如抛出异常或进入无限循环），可以使用 never 类型。

function throwError(message: string): never {
    throw new Error(message);
}

函数高级用法

函数重载

函数重载允许我们为同一个函数提供多个不同的类型定义。这在函数根据不同的参数类型或数量执行不同逻辑时非常有用。

function addOverload(a: number, b: number): number;
function addOverload(a: string, b: string): string;
function addOverload(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;
    }
    return null;
}
const numResult = addOverload(1, 2);
const strResult = addOverload('Hello, ', 'world');

在这个例子中，我们为 addOverload 函数定义了两个重载签名。第一个签名表示接受两个 number 类型参数并返回 number 类型，第二个签名表示接受两个 string 类型参数并返回 string 类型。实际的函数实现需要兼容这些重载签名。

箭头函数

箭头函数是TypeScript中定义函数的一种简洁方式。它有更短的语法，并且没有自己的 this、arguments、super 或 new.target 绑定。

基本语法：

const multiply = (a: number, b: number) => a * b;

这是一个简单的箭头函数，接受两个 number 类型参数并返回它们的乘积。

箭头函数与 this 绑定：

const person = {
    name: 'Alice',
    greet: function () {
        setTimeout(() => {
            console.log(`Hello, ${this.name}!`);
        }, 1000);
    }
};
person.greet();

在这个例子中，箭头函数 setTimeout 内部的 this 绑定到了 person 对象，因为箭头函数没有自己的 this，它会从外层作用域继承 this。

函数类型

在TypeScript中，函数也有类型。我们可以将函数类型赋值给变量，或者作为其他函数的参数类型。

定义函数类型：

type AddFunction = (a: number, b: number) => number;
const addFunction: AddFunction = (a, b) => a + b;

这里定义了一个 AddFunction 类型，表示接受两个 number 类型参数并返回 number 类型的函数。然后我们声明了一个 addFunction 变量，并将其类型指定为 AddFunction。

函数类型作为参数：

function calculate(a: number, b: number, operation: (a: number, b: number) => number): number {
    return operation(a, b);
}
const resultCalculate = calculate(5, 3, (a, b) => a + b);
console.log(resultCalculate); // 输出8

在 calculate 函数中，第三个参数 operation 是一个函数类型，它接受两个 number 类型参数并返回 number 类型。

泛型函数

泛型函数允许我们定义一种通用的函数，它可以接受不同类型的参数，而不需要为每种类型都定义一个单独的函数。

基本泛型函数：

function identity<T>(arg: T): T {
    return arg;
}
const resultIdentity = identity<number>(5);
const strResultIdentity = identity<string>('Hello');

在这个 identity 函数中，<T> 是类型参数。它表示一个通用的类型，在调用函数时可以指定具体的类型，如 number 或 string。

多个类型参数：

function swap<T, U>(a: T, b: U): [U, T] {
    return [b, a];
}
const swapped = swap<number, string>(1, 'two');
console.log(swapped); // 输出['two', 1]

这里的 swap 函数有两个类型参数 T 和 U，它接受两个不同类型的参数，并返回一个包含这两个参数但顺序相反的数组。

函数装饰器

函数装饰器是一种特殊类型的声明，它能够被附加到类的方法声明上。它用于修改类的方法行为或添加额外的逻辑。

简单函数装饰器示例：

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
        console.log(`Calling method ${propertyKey} with args:`, args);
        const result = originalMethod.apply(this, args);
        console.log(`Method ${propertyKey} returned:`, result);
        return result;
    };
    return descriptor;
}
class MathUtils {
    @log
    add(a: number, b: number) {
        return a + b;
    }
}
const mathUtils = new MathUtils();
mathUtils.add(2, 3);

在这个例子中，log 是一个函数装饰器。它接受目标对象、属性名和属性描述符作为参数。在装饰器内部，我们修改了方法的行为，在方法调用前后打印日志。

异步函数

TypeScript 支持异步函数，使用 async 和 await 关键字。async 函数总是返回一个 Promise。

基本异步函数：

async function fetchData(): Promise<string> {
    return 'Data fetched successfully';
}
fetchData().then(data => console.log(data));

这里定义了一个 fetchData 异步函数，它返回一个 Promise，Promise 的解析值是一个字符串。

使用 await：

function delay(ms: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, ms));
}
async function asyncOperation() {
    console.log('Start operation');
    await delay(2000);
    console.log('Operation completed after 2 seconds');
}
asyncOperation();

在 asyncOperation 函数中，await 关键字用于暂停函数执行，直到 delay 返回的 Promise 被解析。这样可以按顺序执行异步操作，使异步代码看起来更像同步代码。

函数的类型兼容性

在TypeScript中，函数的类型兼容性是基于参数和返回值类型的。

参数类型兼容性

参数少的兼容参数多的：当比较两个函数类型时，如果一个函数的参数个数比另一个少，那么参数少的函数类型兼容参数多的函数类型。
```
type Func1 = (a: number, b: number) => void;
type Func2 = (a: number) => void;
let func1: Func1;
let func2: Func2;
func1 = func2; // 允许，func2兼容func1
```
这里 func2 函数的参数个数比 func1 少，所以 func2 类型兼容 func1 类型。这意味着可以将 func2 赋值给 func1 类型的变量。

参数类型兼容性：对于参数类型，实参类型必须能够赋值给形参类型。

type Animal = { name: string };
type Dog = { name: string; breed: string };
function printAnimal(animal: Animal) {
    console.log(animal.name);
}
function printDog(dog: Dog) {
    console.log(dog.name, dog.breed);
}
let printAnimalFunc: (animal: Animal) => void;
let printDogFunc: (dog: Dog) => void;
printAnimalFunc = printDogFunc; // 允许，Dog类型兼容Animal类型

这里 Dog 类型是 Animal 类型的子类型，所以 printDogFunc 可以赋值给 printAnimalFunc。

返回值类型兼容性

返回值类型必须是兼容的，即返回值类型必须能够赋值给目标函数的返回值类型。

type ReturnNumber = () => number;
type ReturnString = () => string;
let returnNumberFunc: ReturnNumber;
let returnStringFunc: ReturnString;
returnNumberFunc = returnStringFunc; // 报错，string类型不兼容number类型

在这个例子中，ReturnString 类型的函数返回 string，而 ReturnNumber 类型的函数返回 number，string 类型不能赋值给 number 类型，所以会报错。

函数与接口

用接口定义函数类型

我们可以使用接口来定义函数类型。

interface AddInterface {
    (a: number, b: number): number;
}
const addInterfaceFunction: AddInterface = (a, b) => a + b;

这里定义了一个 AddInterface 接口，它描述了一个接受两个 number 类型参数并返回 number 类型的函数。然后我们声明了一个 addInterfaceFunction 变量，并将其类型指定为 AddInterface。

函数接口的继承

接口可以继承其他接口，函数接口也不例外。

interface BaseMathFunc {
    (a: number, b: number): number;
}
interface AddFunc extends BaseMathFunc {
    (a: number, b: number): number;
}
interface MultiplyFunc extends BaseMathFunc {
    (a: number, b: number): number;
}
const addFunc: AddFunc = (a, b) => a + b;
const multiplyFunc: MultiplyFunc = (a, b) => a * b;

这里 AddFunc 和 MultiplyFunc 接口都继承自 BaseMathFunc 接口，它们都描述了接受两个 number 类型参数并返回 number 类型的函数。

函数在模块中的使用

导出函数

在TypeScript模块中，可以使用 export 关键字导出函数，以便在其他模块中使用。

// mathUtils.ts
export function addModule(a: number, b: number): number {
    return a + b;
}
export function subtractModule(a: number, b: number): number {
    return a - b;
}

在这个 mathUtils.ts 模块中，我们导出了 addModule 和 subtractModule 两个函数。

导入函数

在其他模块中，可以使用 import 关键字导入导出的函数。

// main.ts
import { addModule, subtractModule } from './mathUtils';
const addResult = addModule(5, 3);
const subtractResult = subtractModule(5, 3);
console.log(addResult); // 输出8
console.log(subtractResult); // 输出2

在 main.ts 模块中，我们从 mathUtils.ts 模块导入了 addModule 和 subtractModule 函数，并使用它们进行计算。

函数的性能考虑

函数调用开销

每次函数调用都会有一定的开销，包括创建调用栈、传递参数等。在性能敏感的代码中，尽量减少不必要的函数调用。例如，内联函数体可能会比多次调用函数性能更好。

// 普通函数调用
function square1(num: number): number {
    return num * num;
}
let result1 = 0;
for (let i = 0; i < 1000000; i++) {
    result1 += square1(i);
}
// 内联函数体
let result2 = 0;
for (let i = 0; i < 1000000; i++) {
    result2 += i * i;
}

在这个简单的例子中，内联 num * num 计算比调用 square1 函数可能会有更好的性能，因为减少了函数调用的开销。

闭包与性能

闭包是指函数能够访问其外部作用域的变量。虽然闭包非常强大，但过度使用闭包可能会导致性能问题，因为闭包会延长变量的生命周期，可能导致内存泄漏。

function outer() {
    const largeArray = new Array(1000000).fill(0);
    return function inner() {
        return largeArray.length;
    };
}
const innerFunc = outer();
// 即使outer函数执行完毕，largeArray仍然不能被垃圾回收，因为innerFunc持有对它的引用

在这个例子中，inner 函数形成了闭包，它引用了 outer 函数中的 largeArray。即使 outer 函数执行完毕，largeArray 仍然不能被垃圾回收，因为 innerFunc 持有对它的引用。如果这种情况频繁发生，可能会导致内存问题。

函数在面向对象编程中的应用

类的方法

在TypeScript的类中，函数通常作为类的方法。类的方法可以访问类的属性，并且有自己的 this 绑定。

class Circle {
    radius: number;
    constructor(radius: number) {
        this.radius = radius;
    }
    calculateArea(): number {
        return Math.PI * this.radius * this.radius;
    }
}
const circle = new Circle(5);
const area = circle.calculateArea();
console.log(area); // 输出约78.5398

在 Circle 类中，calculateArea 是一个方法，它可以访问类的 radius 属性，并计算圆的面积。

静态方法

静态方法是属于类本身而不是类实例的方法。使用 static 关键字定义。

class MathHelpers {
    static addStatic(a: number, b: number): number {
        return a + b;
    }
}
const staticResult = MathHelpers.addStatic(3, 4);
console.log(staticResult); // 输出7

这里 addStatic 是 MathHelpers 类的静态方法，通过类名直接调用，不需要创建类的实例。

函数式编程风格在TypeScript函数中的体现

纯函数

纯函数是指在相同的输入下总是返回相同的输出，并且没有副作用（例如不修改外部变量、不进行I/O操作等）。在TypeScript中可以很容易地编写纯函数。

function pureAdd(a: number, b: number): number {
    return a + b;
}

pureAdd 函数是一个纯函数，无论何时调用，只要输入相同，输出就相同，并且不会对外部状态产生影响。

高阶函数

高阶函数是指接受一个或多个函数作为参数，或者返回一个函数的函数。

function forEach<T>(array: T[], callback: (item: T) => void) {
    for (let i = 0; i < array.length; i++) {
        callback(array[i]);
    }
}
const numbers = [1, 2, 3];
forEach(numbers, (num) => console.log(num));

在这个例子中，forEach 函数是一个高阶函数，它接受一个数组和一个回调函数作为参数，并对数组中的每个元素执行回调函数。

函数组合

函数组合是将多个函数组合成一个新函数的技术。在TypeScript中可以通过自定义函数来实现函数组合。

function compose<T, U, V>(f: (u: U) => V, g: (t: T) => U): (t: T) => V {
    return (t: T) => f(g(t));
}
function square(num: number): number {
    return num * num;
}
function addOne(num: number): number {
    return num + 1;
}
const composedFunction = compose(square, addOne);
const resultComposed = composedFunction(3);
console.log(resultComposed); // 输出16，先执行addOne(3)得到4，再执行square(4)得到16

这里定义了一个 compose 函数，它接受两个函数 f 和 g，并返回一个新的函数，这个新函数先执行 g，再执行 f。

函数与ES6模块系统

模块导出函数的不同方式

命名导出：前面提到的在模块中使用 export 关键字直接导出函数就是命名导出。

// utils.ts
export function sumModule(a: number, b: number): number {
    return a + b;
}
export function multiplyModule(a: number, b: number): number {
    return a * b;
}

在其他模块中导入命名导出的函数：

// main.ts
import { sumModule, multiplyModule } from './utils';
const sumResult = sumModule(2, 3);
const multiplyResult = multiplyModule(2, 3);

默认导出：可以使用 export default 导出一个默认的函数。

// greeting.ts
const greet = (name: string) => `Hello, ${name}!`;
export default greet;

在其他模块中导入默认导出的函数：

// main.ts
import greet from './greeting';
const message = greet('John');

模块作用域对函数的影响

在模块内部定义的函数具有模块作用域。这意味着函数在模块外部是不可见的，除非通过导出使其可见。模块作用域有助于避免全局命名冲突，提高代码的可维护性和封装性。

// privateFunc.ts
function privateFunction() {
    console.log('This is a private function');
}
export function publicFunction() {
    privateFunction();
    console.log('This is a public function');
}

在这个例子中，privateFunction 在模块外部是不可访问的，只有 publicFunction 可以通过导出在其他模块中使用。而 publicFunction 可以调用模块内部的 privateFunction。

函数在前端框架中的应用

在React中的函数式组件

在React中，函数式组件是一种常用的组件定义方式。TypeScript为React函数式组件提供了强大的类型支持。

import React from'react';
interface Props {
    name: string;
}
const Greeting: React.FC<Props> = ({ name }) => {
    return <div>Hello, {name}!</div>;
};
export default Greeting;

这里定义了一个 Greeting 函数式组件，它接受一个 Props 接口类型的属性对象，并返回一个React元素。React.FC 是TypeScript中React函数式组件的类型定义。

在Vue中的方法定义

在Vue中，也可以使用TypeScript来定义组件的方法。

import { defineComponent } from 'vue';
export default defineComponent({
    data() {
        return {
            count: 0
        };
    },
    methods: {
        increment() {
            this.count++;
        }
    }
});

在这个Vue组件中，increment 是一个方法，它可以修改组件的 count 数据。通过TypeScript的类型检查，可以确保方法的正确使用和数据的类型安全。

函数与代码优化

函数的复用与重构

提取公共函数：在代码中，如果发现多个地方有重复的逻辑，可以将这些逻辑提取到一个公共函数中。这样不仅减少了代码冗余，还便于维护。

// 原始代码，有重复逻辑
function calculateArea1(radius: number) {
    return Math.PI * radius * radius;
}
function calculateVolume1(radius: number, height: number) {
    const baseArea = Math.PI * radius * radius;
    return baseArea * height;
}
// 重构后，提取公共函数
function calculateCircleArea(radius: number) {
    return Math.PI * radius * radius;
}
function calculateVolume2(radius: number, height: number) {
    const baseArea = calculateCircleArea(radius);
    return baseArea * height;
}

在这个例子中，将计算圆面积的逻辑提取到 calculateCircleArea 函数中，calculateVolume2 函数复用了这个函数。

重构复杂函数：如果一个函数过于复杂，包含大量的逻辑，可以将其分解为多个小函数。这样每个小函数的职责单一，代码更易读和维护。

// 复杂函数
function processData(data: string) {
    const trimmedData = data.trim();
    const splitData = trimmedData.split(',');
    const numbers = splitData.map(str => parseInt(str, 10)).filter(num =>!isNaN(num));
    const sum = numbers.reduce((acc, num) => acc + num, 0);
    return sum;
}
// 重构后
function trimData(data: string): string {
    return data.trim();
}
function splitTrimmedData(data: string): string[] {
    return data.split(',');
}
function convertToNumbers(strs: string[]): number[] {
    return strs.map(str => parseInt(str, 10)).filter(num =>!isNaN(num));
}
function calculateSum(numbers: number[]): number {
    return numbers.reduce((acc, num) => acc + num, 0);
}
function processDataRefactored(data: string) {
    const trimmed = trimData(data);
    const split = splitTrimmedData(trimmed);
    const numbers = convertToNumbers(split);
    return calculateSum(numbers);
}

这里将 processData 函数分解为多个小函数，每个小函数负责一个具体的操作，如修剪数据、分割数据、转换为数字和计算总和。

函数性能优化技巧

缓存函数结果：如果一个函数的计算成本较高，并且在相同输入下结果不会改变，可以缓存函数的结果。
```
const resultCache = new Map();
function expensiveCalculation(a: number, b: number): number {
    const key = `${a}-${b}`;
    if (resultCache.has(key)) {
        return resultCache.get(key);
    }
    const result = a * a + b * b;
    resultCache.set(key, result);
    return result;
}
```
在这个例子中，expensiveCalculation 函数使用 Map 来缓存计算结果。如果相同参数的计算已经执行过，直接从缓存中返回结果，避免重复计算。
避免不必要的函数创建：在循环中创建函数会导致性能问题，因为每次循环都要创建新的函数实例。尽量将函数定义放在循环外部。
```
// 不好的做法
for (let i = 0; i < 1000; i++) {
    const func = function () {
        return i * i;
    };
    console.log(func());
}
// 好的做法
function square(num: number) {
    return num * num;
}
for (let i = 0; i < 1000; i++) {
    console.log(square(i));
}
```
在第一个例子中，每次循环都创建一个新的函数 func。而在第二个例子中，将 square 函数定义在循环外部，避免了不必要的函数创建。

函数的调试与错误处理

调试函数

使用 console.log：在函数内部使用 console.log 输出变量的值是一种简单的调试方法。

function divide(a: number, b: number): number {
    console.log(`Dividing ${a} by ${b}`);
    if (b === 0) {
        throw new Error('Division by zero');
    }
    return a / b;
}
try {
    const result = divide(10, 2);
    console.log(result);
} catch (error) {
    console.error(error);
}

在 divide 函数中，通过 console.log 输出了除法操作的信息，有助于了解函数的执行过程。

使用调试器：在现代的代码编辑器中，如Visual Studio Code，可以使用调试器。在函数中设置断点，然后以调试模式运行代码。当代码执行到断点处时，编辑器会暂停，允许查看变量的值、调用栈等信息。
```
function complexCalculation(a: number, b: number): number {
    let result = a + b;
    result = result * result;
    result = result / 2;
    return result;
}
const finalResult = complexCalculation(3, 5);
console.log(finalResult);
```
在 complexCalculation 函数的每一行设置断点，然后启动调试，就可以逐步查看 result 变量在不同计算步骤的值。

错误处理

使用 try - catch：在函数中，如果可能会抛出异常，可以使用 try - catch 块来捕获并处理异常。

function readFile(filePath: string): string {
    // 模拟文件读取，这里简单抛出异常
    throw new Error('File not found');
}
try {
    const content = readFile('nonexistent.txt');
    console.log(content);
} catch (error) {
    console.error('Error reading file:', error.message);
}

在这个例子中，readFile 函数模拟文件读取并抛出异常，try - catch 块捕获并处理了这个异常，输出错误信息。

自定义错误类型：可以定义自定义的错误类型，以便更好地处理不同类型的错误。

class CustomError extends Error {
    constructor(message: string) {
        super(message);
        this.name = 'CustomError';
    }
}
function performOperation() {
    throw new CustomError('This is a custom error');
}
try {
    performOperation();
} catch (error) {
    if (error instanceof CustomError) {
        console.error('Caught custom error:', error.message);
    } else {
        console.error('Caught other error:', error.message);
    }
}

这里定义了 CustomError 自定义错误类型，在捕获异常时可以根据错误类型进行不同的处理。

函数的测试

单元测试函数

使用Jest： Jest是一个流行的JavaScript和TypeScript测试框架。以下是如何使用Jest测试一个简单的函数。
```
// sum.ts
export function sum(a: number, b: number): number {
    return a + b;
}
// sum.test.ts
import { sum } from './sum';
test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
});
```
在这个例子中，我们定义了一个 sum 函数，并在 sum.test.ts 文件中使用Jest的 test 函数编写了一个测试用例。expect 用于断言函数的返回值，toBe 用于判断返回值是否等于预期值。

测试异步函数：如果要测试异步函数，可以使用 async/await 结合Jest的 done 回调或 resolves/rejects 匹配器。

// asyncOperation.ts
export async function asyncOperation(): Promise<string> {
    return 'Success';
}
// asyncOperation.test.ts
import { asyncOperation } from './asyncOperation';
test('async operation resolves successfully', async () => {
    const result = await asyncOperation();
    expect(result).toBe('Success');
});

这里测试了一个异步函数 asyncOperation，使用 async/await 等待函数执行完成并断言返回值。

测试覆盖率

测试覆盖率是指被测试代码的比例。Jest可以生成测试覆盖率报告。通过运行 jest --coverage 命令，Jest会分析代码，并生成覆盖率报告，显示哪些代码行被测试覆盖，哪些没有。

// subtract.ts
export function subtract(a: number, b: number): number {
    if (a < b) {
        throw new Error('a must be greater than b');
    }
    return a - b;
}
// subtract.test.ts
import { subtract } from './subtract';
test('subtracts b from a', () => {
    expect(subtract(5, 3)).toBe(2);
});

在这个例子中，如果运行 jest --coverage，会发现 if (a < b) 这一行没有被测试覆盖，因为我们没有编写测试用例来测试 a < b 的情况。可以添加如下测试用例：

test('throws error when a < b', () => {
    expect(() => subtract(3, 5)).toThrow('a must be greater than b');
});

这样就增加了测试覆盖率，确保更多的代码逻辑被测试到。

通过对TypeScript函数基础与高级用法的详细讲解，包括函数定义、参数、返回值、重载、泛型、装饰器等各个方面，以及在不同场景如模块、前端框架中的应用，还有性能考虑、调试、测试等相关内容，希望能帮助开发者更深入地理解和运用TypeScript函数，编写出更健壮、高效且易于维护的代码。