如何为TypeScript的createView函数添加类型以校验参数

要实现createView函数根据传入的视图函数参数类型校验data参数，你需要利用TypeScript的泛型和函数参数类型提取能力，具体实现如下：

类型定义与函数改造 #

// 用泛型捕获视图函数的参数类型
function createView<T>(view: (data: T) => any, data: T): any {
    // 可按需添加运行时校验逻辑（比如类型守卫、JSON Schema校验等）
    return true;
}

// 测试用视图函数保持原有定义
function ViewA(data: { input: string }) {
    return function() { return 'view A'; }
}
function ViewB(data: { input: boolean }) {
    return function() { return 'view B'; }
}

效果验证 #

此时调用createView时，TypeScript会自动推导泛型T的类型，严格校验data参数与视图函数的参数类型是否匹配：

• 合法调用（无类型错误）：

  createView(ViewA, { input: 'some' }); // ✅ 符合ViewA的参数要求
  createView(ViewB, { input: true }); // ✅ 符合ViewB的参数要求
  

• 非法调用（触发类型错误）：

  createView(ViewA, { validate_me: 'some' }); // ❌ 缺少required的input字段
  createView(ViewB, { input: 'some' }); // ❌ input类型应为boolean而非string
  createView(ViewB, { validate_me: 'some' }); // ❌ 缺少required的input字段
  

原理说明 #

• 泛型T会自动捕获传入视图函数的参数类型，实现视图函数与data参数的类型强绑定；
• 编译阶段TypeScript就会完成类型校验，无需额外运行时代码即可拦截不合法的参数传入；
• 如果需要运行时的参数合法性校验，可在createView函数内部添加对应逻辑（比如基于T生成校验规则）。

内容的提问来源于stack exchange，提问作者Vytalyi