TypeScript函数类型约束：从基础到Vue实战

1. TypeScript函数类型基础：从Function到精准约束

作为一名长期使用TypeScript开发Vue项目的前端工程师，我深刻体会到函数类型约束的重要性。在团队协作中，清晰的函数类型定义能减少80%以上的低级错误。让我们从最基础的Function类型开始，逐步深入。

1.1 Function类型的陷阱与局限

很多刚接触TS的开发者喜欢用Function类型，因为它简单直接：

typescript复制let callback: Function;
callback = () => console.log('Hello');
callback = (a: number) => a * 2;

但这种写法存在严重问题：

1. 完全失去了参数类型检查
2. 返回值类型无法确定
3. 调用时参数个数不受限制

在实际项目中，我曾遇到过因为滥用Function类型导致的bug：一个预期接收(id: string) => void的回调函数被误传了(id: number, name: string) => boolean，直到运行时才报错。

1.2 函数类型表达式的正确打开方式

推荐使用箭头函数形式的类型表达式：

typescript复制type FetchUser = (id: string) => Promise<User>;

const fetchUser: FetchUser = async (userId) => {
  // 实现细节
  return await api.getUser(userId);
}

这种写法的优势：

• 参数类型和个数明确
• 返回值类型可预测
• 代码可读性大幅提升
• 编辑器智能提示更准确

在Vue组合式API中，这种写法尤其重要：

typescript复制// 定义emit类型
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
  (e: 'submit'): void
}>()

2. 参数高级技巧：五种实战场景解析

2.1 可选参数的黄金法则

可选参数必须放在必选参数之后，这是TS的硬性规定。但在Vue生态中，我们经常需要处理更复杂的情况：

typescript复制// Vue组件props类型
type Props = {
  modelValue: string
  size?: 'small' | 'medium' | 'large'
  disabled?: boolean
}

// 对应的函数参数处理
function handleProps(props: Props) {
  const { modelValue, size = 'medium', disabled = false } = props
  // ...
}

实战技巧：当可选参数较多时，建议改用对象参数，配合解构默认值。

2.2 默认参数的类型推断

TS会根据默认值自动推断类型：

typescript复制function createStore(name = 'default', initialState = {}) {
  // name被推断为string
  // initialState被