TypeScript函数类型详解：从基础到高级应用

1. TypeScript函数类型核心概念解析

函数作为TypeScript中最重要的基础类型之一，其类型系统设计直接决定了代码的健壮性和可维护性。我们先从函数的基础类型约束开始拆解：

1.1 函数声明与表达式类型

在TS中声明函数时，完整的类型标注应该包含参数类型和返回值类型：

typescript复制// 函数声明式
function add(x: number, y: number): number {
  return x + y
}

// 函数表达式
const multiply = function(x: number, y: number): number {
  return x * y
}

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

1. 参数类型注解是强制性的（在严格模式下）
2. 返回值类型通常可以省略（TS会自动推断）
3. 但显式声明返回值类型可以让代码更易读

实际项目中建议始终显式声明返回值类型，这能帮助团队其他成员快速理解函数功能，也便于编译器早期发现问题。

1.2 箭头函数的类型标注

ES6箭头函数在TS中的类型标注略有不同：

typescript复制const divide = (x: number, y: number): number => x / y

箭头函数类型的一个典型应用场景是React组件中的事件处理：

typescript复制const Button = () => {
  const handleClick = (e: React.MouseEvent): void => {
    console.log(e.currentTarget)
  }
  
  return <button onClick={handleClick}>Click</button>
}

1.3 可选参数与默认参数

TS对函数参数提供了灵活的控制能力：

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

需要注意：

1. 可选参数必须位于必选参数之后
2. 默认参数本质上也是可选参数
3. 可选参数和默认参数不能同时使用

2. 函数类型进阶玩法

2.1 函数类型重载

当函数需要处理多种参数类型组合时，类型重载就派上用场了：

typescript复制// 重载签名
function formatDate(timestamp: number): string
function formatDate(date: Date): string
function formatDate(str: string): string

// 实现签名
function formatDate(input: number | Date | string): string {
  if (typeof input === 'number') {
    return new Date(input).toISOString()
  } else if (input instanceof Date) {
    return input.toISOString()
  } else {
    return new Date(input).toISOString()
  }
}

重载的黄金法则：

1. 实现签名的参数类型必须是所有重载签名的联合类型
2. 重载签名必须出现在实现签名之前
3. 调用时会从上到下匹配第一个符合的重载签名

2.2 this参数的类型控制

JS中的this指向问题在TS中可以通过类型标注来解决：

typescript复制interface Card {
  suit: string
  card: number
}

interface Deck {
  suits: string[]
  cards: number[]
  createCardPicker(this: Deck): () => Card
}

let deck: Deck = {
  suits: ['hearts', 'spades'],
  cards: Array(52),
  createCardPicker: function(this: Deck) {
    return () => {
      const pickedCard = Math.floor(Math.random() * 52)
      return {
        suit: this.suits[pickedCard % 4],
        card: pickedCard % 13
      }
    }
  }
}

2.3 泛型函数

泛型让函数可以处理多种类型而不丢失类型信息：

typescript复制function identity<T>(arg: T): T {
  return arg
}

// 自动推断类型
let output1 = identity('hello')  // string
let output2 = identity(42)      // number

// 显式指定类型
let output3 = identity<boolean>(true)

泛型约束示例：

typescript复制interface Lengthwise {
  length: number
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length)
  return arg
}

3. 函数类型的高级模式

3.1 条件类型与函数返回

结合条件类型可以实现更智能的函数返回类型推断：

typescript复制type User = { name: string }
type Admin = User & { permissions: string[] }

function getUser<T extends boolean>(
  isAdmin: T
): T extends true ? Admin : User {
  return isAdmin 
    ? { name: 'Admin', permissions: ['all'] } 
    : { name: 'User' }
}

const user = getUser(false)  // User
const admin = getUser(true)  // Admin

3.2 可变参数元组类型

TS 4.0引入的可变参数元组类型让函数参数处理更灵活：

typescript复制function concat<T extends unknown[], U extends unknown[]>(
  arr1: [...T],
  arr2: [...U]
): [...T, ...U] {
  return [...arr1, ...arr2]
}

const result = concat([1, 2], ['a', 'b'])  // [number, number, string, string]

3.3 函数组合的类型推导

高阶函数组合时的类型推导示例：

typescript复制type Func<T, R> = (arg: T) => R

function compose<T, U, V>(
  f: Func<T, U>,
  g: Func<U, V>
): Func<T, V> {
  return (x: T) => g(f(x))
}

const toUpper = (x: string) => x.toUpperCase()
const exclaim = (x: string) => x + '!'

const shout = compose(toUpper, exclaim)
console.log(shout('hello'))  // "HELLO!"

4. 函数类型实战技巧

4.1 类型安全的柯里化实现

实现一个类型安全的柯里化函数：

typescript复制type Curried<T, R> = T extends []
  ? R
  : T extends [infer First, ...infer Rest]
  ? (arg: First) => Curried<Rest, R>
  : never

function curry<T extends unknown[], R>(
  fn: (...args: T) => R
): Curried<T, R> {
  return fn.length === 0
    ? fn()
    : (x: unknown) => curry((fn as any).bind(null, x))
}

const add = (x: number, y: number) => x + y
const curriedAdd = curry(add)
const add5 = curriedAdd(5)
console.log(add5(3))  // 8

4.2 异步函数类型处理

正确处理async函数的返回类型：

typescript复制async function fetchUser(id: string): Promise<User> {
  const response = await fetch(`/users/${id}`)
  return response.json()
}

// 更精确的错误处理
async function fetchUserSafe(
  id: string
): Promise<{ data: User } | { error: Error }> {
  try {
    const response = await fetch(`/users/${id}`)
    return { data: await response.json() }
  } catch (err) {
    return { error: err instanceof Error ? err : new Error(String(err)) }
  }
}

4.3 函数参数的解构类型

参数解构时的类型标注技巧：

typescript复制function draw({
  shape = 'rect',
  x = 0,
  y = 0,
  width = 100,
  height = 100
}: {
  shape?: string
  x?: number
  y?: number
  width?: number
  height?: number
} = {}) {
  console.log(shape, x, y, width, height)
}

5. 常见问题与解决方案

5.1 函数参数类型不匹配

典型错误：

typescript复制function greet(name: string) {
  console.log(`Hello, ${name}`)
}

const names = ['Alice', 'Bob']
names.forEach(greet)  // 错误！

解决方案：

typescript复制// 方案1：类型断言
names.forEach(greet as any)

// 方案2：包装函数
names.forEach(name => greet(name))

// 方案3：调整函数签名
function greet(name: string, index?: number, array?: string[]) {
  console.log(`Hello, ${name}`)
}

5.2 回调函数中的this类型

常见问题：

typescript复制class Handler {
  info: string = 'handler info'
  
  onClick(this: Handler, e: Event) {
    console.log(this.info)
  }
}

const h = new Handler()
// 错误用法：
// document.addEventListener('click', h.onClick)

// 正确用法：
document.addEventListener('click', h.onClick.bind(h))

5.3 泛型函数类型推断失败

当类型推断不如预期时：

typescript复制function merge<T, U>(x: T, y: U): T & U {
  return { ...x, ...y }
}

// 推断为 { a: number } & { b: string }
const result1 = merge({ a: 1 }, { b: '2' })

// 显式指定类型参数
const result2 = merge<{ a: number }, { b: string }>({ a: 1 }, { b: '2' })

6. 性能优化与最佳实践

6.1 避免过度使用函数重载

虽然函数重载很有用，但过度使用会导致代码难以维护。建议：

1. 当参数类型组合超过3种时，考虑使用联合类型
2. 重载签名应该保持简单，复杂逻辑放在实现签名中
3. 为每个重载添加清晰的注释

6.2 合理使用函数类型别名

对于复杂的函数类型，使用type alias提高可读性：

typescript复制type StringTransformer = {
  (input: string): string
  prefix: string
  suffix: string
}

const transform: StringTransformer = (input: string) => {
  return transform.prefix + input + transform.suffix
}
transform.prefix = 'Hello, '
transform.suffix = '!'

6.3 利用内置工具类型简化函数类型

TS提供的内置工具类型可以简化函数类型定义：

typescript复制type Predicate<T> = (value: T) => boolean
type Parameters<T> = T extends (...args: infer P) => any ? P : never
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any

function debounce<F extends (...args: any[]) => any>(
  func: F,
  wait: number
): (...args: Parameters<F>) => void {
  let timeout: number
  return (...args: Parameters<F>) => {
    clearTimeout(timeout)
    timeout = setTimeout(() => func(...args), wait)
  }
}

在大型项目中，函数类型的正确使用可以显著提高代码质量和开发效率。掌握这些技巧后，你会发现TypeScript的类型系统能为你提供前所未有的开发体验和安全性保障。