函数类型声明 - 元素码农

发布时间: 2025-03-31 09:21

↑

# 函数类型声明

TypeScript中的函数类型声明是一种强大的特性，它可以帮助我们更好地定义和使用函数。本文将详细介绍函数类型声明的各种方式和最佳实践。

## 基本函数类型

### 函数声明

```typescript
// 基本函数声明
function add(x: number, y: number): number {
    return x + y;
}

// 无返回值的函数
function log(message: string): void {
    console.log(message);
}

// 返回never类型的函数
function throwError(message: string): never {
    throw new Error(message);
}
```

### 函数表达式

```typescript
// 函数表达式
let multiply: (x: number, y: number) => number =
    function(x: number, y: number): number {
        return x * y;
    };

// 使用类型别名
type MathFunction = (x: number, y: number) => number;
let divide: MathFunction = function(x, y) {
    return x / y;
};
```

## 函数接口

### 接口定义函数类型

```typescript
// 函数接口
interface Calculator {
    (x: number, y: number): number;
    reset(): void;
}

// 实现函数接口
let calc: Calculator = function(x: number, y: number) {
    return x + y;
} as Calculator;

calc.reset = function() {
    console.log("Calculator reset");
};
```

### 混合类型接口

```typescript
interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

## 函数重载

```typescript
// 函数重载声明
function reverse(x: string): string;
function reverse(x: number): number;
function reverse(x: string | number): string | number {
    if (typeof x === "string") {
        return x.split("").reverse().join("");
    } else {
        return Number(x.toString().split("").reverse().join(""));
    }
}

console.log(reverse("hello")); // "olleh"
console.log(reverse(123));    // 321
```

## 泛型函数

```typescript
// 基本泛型函数
function identity<T>(arg: T): T {
    return arg;
}

// 泛型函数类型
let myIdentity: <T>(arg: T) => T = identity;

// 泛型接口
interface GenericIdentityFn<T> {
    (arg: T): T;
}

let myIdentityFn: GenericIdentityFn<number> = identity;
```

## 构造函数类型

```typescript
// 构造函数类型
interface ClockConstructor {
    new (hour: number, minute: number): ClockInterface;
}

interface ClockInterface {
    tick(): void;
}

class DigitalClock implements ClockInterface {
    constructor(h: number, m: number) {}
    tick() {
        console.log("beep beep");
    }
}

function createClock(
    ctor: ClockConstructor,
    hour: number,
    minute: number
): ClockInterface {
    return new ctor(hour, minute);
}
```

## 最佳实践

1. **明确的参数和返回类型**：
```typescript
// 好的实践
function calculateArea(width: number, height: number): number {
    return width * height;
}

// 避免这样
function calculateArea(width, height) {
    return width * height;
}
```

2. **使用函数类型别名**：
```typescript
// 定义可重用的函数类型
type AsyncCallback<T> = (error: Error | null, result: T) => void;

function fetchData(callback: AsyncCallback<string>) {
    // 实现
}
```

3. **合理使用函数重载**：
```typescript
// 好的重载示例
function createElement(tag: "a"): HTMLAnchorElement;
function createElement(tag: "canvas"): HTMLCanvasElement;
function createElement(tag: string): HTMLElement {
    return document.createElement(tag);
}
```

## 常见问题

1. **this的类型**：
```typescript
interface UIElement {
    addClickListener(onclick: (this: void, e: Event) => void): void;
}

class Handler {
    info: string;
    onClickBad(this: Handler, e: Event) {
        this.info = e.type;
    }
}
```

2. **可选参数的位置**：
```typescript
// 好的实践
function buildName(firstName: string, lastName?: string) {
    // ...
}

// 避免这样
function buildName(firstName?: string, lastName: string) {
    // 编译错误：必需参数不能位于可选参数后
}
```

## 下一步

掌握了函数类型声明后，你可以：

1. 学习更多关于函数参数的特性
2. 探索箭头函数的使用
3. 深入了解泛型函数
4. 实践函数式编程概念

通过合理使用函数类型声明，你可以创建更加类型安全和可维护的TypeScript代码。