TypeScript 函数类型：函数签名与重载

理解TypeScript函数签名

学习 TypeScript函数签名的基本语法。函数签名包括参数类型和返回类型，用于定义函数的输入输出规范。

function 函数名(参数1: 类型1, 参数2: 类型2): 返回类型 {
    // 函数体
}

创建 一个简单的函数示例来理解基础签名：

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

分析 函数签名的组成部分：

• a: number - 参数a及其类型
• b: number - 参数b及其类型
• : number - 函数返回值类型

使用 函数类型注解，确保代码更安全：

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

---

## 函数参数类型详解

**区分** 必需参数和可选参数。在可选参数名称前添加 `?` 符号：

```typescript
function printInfo(name: string, age?: number): void {
    console.log(`Name: ${name}`);
    if (age !== undefined) {
        console.log(`Age: ${age}`);
    }
}
```

**掌握** 默认参数的设置方式：

```typescript
function createPoint(x: number = 0, y: number = 0): { x: number; y: number } {
    return { x, y };
}
```

**使用** 剩余参数收集多个值：

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

**理解** 参数解构的使用方法：

```typescript
function printDetails({ name, age }: { name: string; age: number }): void {
    console.log(`Name: ${name}, Age: ${age}`);
}
```

---

## 函数重载机制

**认识** 函数重载的概念。函数重允许为同一个函数定义多种类型签名，根据调用方式自动选择合适的类型。

```typescript
function process(value: string): string;
function process(value: number): number;
function process(value: string | number): string | number {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
    return value * 2;
}
```

**应用** 函数重载处理不同类型的输入：

```typescript
function format(input: string): string;
function format(input: number): string;
function format(input: string | number): string {
    if (typeof input === 'string') {
        return input.trim();
    }
    return input.toFixed(2);
}
```

**区分** 重载签名和实现签名。重载签名只提供类型信息，实现签名包含实际逻辑：

```typescript
// 重载签名
function getValue(key: string): string;
function getValue(key: number): number;
// 实现签名
function getValue(key: string | number): string | number {
    const data = {
        'name': 'TypeScript',
        1: 42
    };
    return data[key];
}
```

---

## 高级函数类型技巧

**使用** 类型别名定义函数类型：

```typescript
type MathOperation = (a: number, b: number) => number;

const add: MathOperation = (x, y) => x + y;
const multiply: MathOperation = (x, y) => x * y;
```

**创建** 可调用接口定义函数签名：

```typescript
interface Calculator {
    (a: number, b: number): number;
    description: string;
}

const calculator: Calculator = ((a, b) => a + b);
calculator.description = "Addition calculator";
```

**应用** 泛型约束在函数签名中：

```typescript
function firstElement<T>(arr: T[]): T | undefined {
    return arr[0];
}
```

**掌握** 函数重载中的泛型类型：

```typescript
function merge<T, U>(obj1: T, obj2: U): T & U;
function merge<T, U>(obj1: T, obj2: U): T & U {
    return { ...obj1, ...obj2 };
}
```

---

## 实际应用场景

**处理** 表单验证时的重载：

```typescript
function validate(input: string): { valid: boolean; error?: string };
function validate(input: string[]): { valid: boolean; errors?: string[] };
function validate(input: string | string[]): { valid: boolean; error?: string; errors?: string[] } {
    if (typeof input === 'string') {
        const valid = input.length > 3;
        return {
            valid,
            error: valid ? undefined : "Input too short"
        };
    }
    
    const errors = input.map(str => str.length > 3 ? undefined : "Input too short").filter(Boolean);
    return {
        valid: errors.length === 0,
        errors
    };
}
```

**实现** API响应处理的重载：

```typescript
function handleResponse(response: { success: true; data: any }): any;
function handleResponse(response: { success: false; error: string }): never;
function handleResponse(response: { success: boolean; data?: any; error?: string }): any | never {
    if (response.success) {
        return response.data;
    }
    throw new Error(response.error);
}
```

**构建** 事件处理器的重载：

```typescript
function on(event: 'click', callback: (e: MouseEvent) => void): void;
function on(event: 'keypress', callback: (e: KeyboardEvent) => void): void;
function on(event: string, callback: Function): void {
    console.log(`Listening to ${event}`);
    // 实际绑定事件处理器的逻辑
}

最佳实践与注意事项

避免 过度使用函数重载。只有在确实需要多种调用方式时才使用重载。

记住 重载签名的顺序很重要。将更具体的签名放在前面，通用签名放在后面。

保持 实现签名与所有重载签名兼容。实现签名应该能够处理所有重载签名定义的情况。

使用 类型推断减少不必要的类型注解。TypeScript通常会自动推断函数参数和返回值的类型。

考虑 使用联合类型替代部分重载场景。对于简单的多类型处理，联合类型可能比重载更简洁。

注意 函数重载只对类型系统有效，运行时实际执行的只有一个实现函数。