TypeScript函数类型全面解析：从基础到高级实践

1. TypeScript函数类型基础入门

函数作为JavaScript的一等公民，在TypeScript中获得了更强大的类型支持。我们先从最基础的函数类型约束开始，这是TypeScript类型系统的基石之一。

1.1 函数声明与表达式类型

在TypeScript中声明函数时，可以通过两种主要方式添加类型注解：

typescript复制// 函数声明
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// 函数表达式
const greet = function(name: string): string {
  return `Hello, ${name}!`;
};

这里有几个关键点需要注意：

1. 参数类型注解位于参数名后，用冒号分隔
2. 返回值类型注解位于参数列表后
3. 如果函数没有返回值，应该使用void类型

提示：即使TypeScript可以推断出返回值类型，显式声明返回值类型也是个好习惯，这可以作为文档使用，并在实现与声明不符时提供错误检查。

1.2 箭头函数类型

箭头函数的类型注解与普通函数表达式类似，但语法更简洁：

typescript复制const greet = (name: string): string => `Hello, ${name}!`;

对于更复杂的箭头函数，可以使用以下格式：

typescript复制const calculate = (x: number, y: number): number => {
  const result = x * y + 100;
  return result / 2;
};

1.3 可选参数与默认参数

TypeScript允许我们定义可选参数和带默认值的参数：

typescript复制function createUser(
  name: string,
  age?: number,  // 可选参数
  role: string = 'user'  // 默认参数
): User {
  // ...
}

关于可选参数需要注意：

• 可选参数必须位于必选参数之后
• 可选参数和带默认值的参数在调用时都可以省略
• 带默认值的参数不需要放在参数列表最后

1.4 剩余参数

处理可变数量参数时，可以使用剩余参数语法：

typescript复制function sum(...numbers: number[]): number {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

剩余参数的类型注解必须是数组类型，它会把所有剩余参数收集到一个数组中。

2. 函数类型进阶技巧

掌握了基础之后，我们来看一些更高级的函数类型用法。

2.1 函数类型签名

除了直接给函数添加类型注解，我们还可以先定义函数类型，再将其应用到函数上：

typescript复制type GreetFunction = (name: string) => string;

const greet: GreetFunction = (name) => `Hello, ${name}!`;

这种方式特别适合以下场景：

• 多个函数需要遵循相同的签名
• 函