TypeScript如何基于name字段为多接口实现通用类型守卫？

问题背景 #

在TypeScript中，类型守卫的常规写法如下：

const isFoo = (x: any): x is Foo => {
  return (x as Foo).FooField !== undefined;
}

我拥有多个接口（如Foo、Bar、Baz），它们均继承自包含name字段的BaseInterface：

interface BaseInterface {
  name: string
}

interface Foo extends BaseInterface {
  name: 'FOO'
}
// Bar、Baz接口结构类似

是否可以基于name字段的值，创建一个适用于所有这些接口的通用类型守卫？期望实现的效果类似：

const nameToType = {
  'FOO': Foo,
  'BAR': Bar,
  'BAZ': Baz
}

// 当前写法存在混淆编译时与运行时数据结构等问题
const genericTypeGuard = <T extends BaseInterface>(x: T): x is nameToType[x.name] {
  return nameToType[x.name]
}

补充缓存场景示例 #

在缓存逻辑中也遇到了同类问题：

// 用于后端数据选择的配置
interface SelectByValue {
  name: 'SELECT_BY_VALUE'
  fieldKey: string
  value: string
}

interface ExpensiveSortArgs {
  name: 'EXPENSIVE_SORT_ARGS',
  selector: SelectByValue | SelectByContainer | ... 
  // 其他字段
}

interface ExpensiveSortResult {
  name: 'EXPENSIVE_SORT_RESULT',
  result: string[]
}

const runExpensiveSort = (args: ExpensiveSortArgs): ExpensiveSortResult => {
  const result = axios.post('/api/expensivesort', args as any);
  cache.storeResult('/api/expensivesort', args, result);
}

// cache.ts中的存储逻辑
const storeResult = (url: string, args: {[key: string]: any}, result: any) => {
  if (args?.selector?.name === 'SELECT_BY_VALUE') {
    // 为缓存添加特定失效键
  }

  cache.write(url, hash(args), result)
}

这里TypeScript会在args.selector行报错，因为它认为args不存在selector字段。常规方案是编写多个独立类型守卫，但希望利用所有接口都包含name字段的特性实现通用方案。

解决方案 #

可以通过联合类型映射+运行时校验映射的方式实现通用类型守卫，核心是将编译时类型信息与运行时校验逻辑绑定，避免重复编写守卫函数。

步骤1：定义联合类型与运行时校验映射 #

首先将所有带name标识的接口合并为联合类型，同时创建运行时的校验映射（注意TypeScript接口是编译时概念，无法直接在运行时引用，因此用类型谓词函数作为校验逻辑）：

// 基础接口与子接口定义
interface BaseInterface {
  name: string;
}

interface Foo extends BaseInterface {
  name: 'FOO';
  fooField: string;
}

interface Bar extends BaseInterface {
  name: 'BAR';
  barField: number;
}

interface Baz extends BaseInterface {
  name: 'BAZ';
  bazField: boolean;
}

// 所有目标类型的联合类型
type AllTypes = Foo | Bar | Baz;

// 运行时校验映射：键为name值，值为对应类型的守卫函数
const typeGuards: Record<AllTypes['name'], (x: unknown) => x is AllTypes> = {
  'FOO': (x: unknown): x is Foo => {
    return typeof x === 'object' && x !== null && 'fooField' in x;
  },
  'BAR': (x: unknown): x is Bar => {
    return typeof x === 'object' && x !== null && 'barField' in x;
  },
  'BAZ': (x: unknown): x is Baz => {
    return typeof x === 'object' && x !== null && 'bazField' in x;
  }
};

步骤2：实现通用类型守卫函数 #

基于上述映射，编写通用守卫，它会根据name字段自动匹配对应的校验逻辑：

// 精确指定目标类型的版本
const isTypedByKey = <T extends AllTypes>(x: unknown, key: T['name']): x is T => {
  // 先校验x是否具备合法的name字段
  if (typeof x !== 'object' || x === null || !('name' in x) || typeof (x as BaseInterface).name !== 'string') {
    return false;
  }
  // 调用对应name的校验函数
  return typeGuards[key](x);
};

// 自动识别name的版本
const isTyped = (x: unknown): x is AllTypes => {
  if (typeof x !== 'object' || x === null || !('name' in x) || typeof (x as BaseInterface).name !== 'string') {
    return false;
  }
  const name = (x as BaseInterface).name;
  // 检查name是否在映射中，再执行校验
  return name in typeGuards && typeGuards[name](x);
};

步骤3：缓存场景的适配 #

针对缓存场景的storeResult函数，可通过类型收窄或通用守卫解决类型报错问题：

// 方案1：指定args为联合类型，利用TypeScript自动类型收窄
type CacheableArgs = ExpensiveSortArgs | /* 其他可能的参数类型 */;

const storeResult = (url: string, args: CacheableArgs, result: any) => {
  if (args.name === 'EXPENSIVE_SORT_ARGS') {
    // 此时args被自动收窄为ExpensiveSortArgs，selector字段合法
    if (args.selector.name === 'SELECT_BY_VALUE') {
      // selector被收窄为SelectByValue，可安全访问fieldKey等字段
      console.log(args.selector.fieldKey);
      // 执行缓存失效键逻辑
    }
  }

  cache.write(url, hash(args), result);
};

// 方案2：保留args为unknown类型，用通用守卫手动收窄
const storeResult = (url: string, args: unknown, result: any) => {
  if (isTyped(args) && args.name === 'EXPENSIVE_SORT_ARGS') {
    if (args.selector.name === 'SELECT_BY_VALUE') {
      // 类型安全的操作逻辑
    }
  }

  cache.write(url, hash(args as any), result);
};

关键注意事项 #

• 不能直接将接口作为运行时值（如示例中的nameToType），因为接口编译后会被移除，运行时不存在。必须用类型守卫函数作为运行时校验逻辑。
• 通用守卫的核心是保证编译时联合类型与运行时校验映射的一一对应，每个name值都要有对应的校验逻辑。
• 对于嵌套结构（如args.selector），可给嵌套类型创建类似的通用守卫，或利用TypeScript的自动收窄特性（外层name匹配后，内层联合类型会根据自身name自动收窄）。

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