TypeScript泛型使用不当未触发报错，如何配置检测此类问题？

核心原因 #

首先明确：JavaScript中展开原始类型（如number、boolean）是合法语法，运行{...5}会得到空对象，不会抛出运行时错误。TypeScript在直接写{...5}时报错，是因为它的类型检查规则会主动禁止展开非对象/非字符串的原始类型——但这个检查只在类型明确时生效。

当你使用无约束泛型T时，TypeScript无法提前确定T的具体类型，它会默认T可能是任何合法类型（包括支持展开的对象/字符串），因此不会在组件定义阶段对...oldObject抛出错误。而调用组件时，因为泛型T没有约束，传入number完全符合泛型的类型要求，TypeScript也不会回溯检查组件内部的展开操作是否与传入的T兼容。

对比直接将oldObject设为number的情况：此时类型完全明确，TypeScript可以直接匹配到“禁止展开非对象/非字符串”的规则，因此会正确报错。

解决方案：恢复类型检测能力 #

要让TypeScript检测到这类错误，需要通过泛型约束提前限定T的合法范围，确保只有可展开的类型才能传入组件。

1. 限定T为对象或字符串（匹配JS展开规则） #

interface ComponentProps<T extends object | string> {
  oldObject: T
}

function Component<T extends object | string>({ oldObject }: ComponentProps<T>) {
  const newObject = {
    ...oldObject
  }
  return <div>hi</div>
}

// 此时传入number会直接触发TS错误：类型“number”不满足约束“object | string”
return <Component<number> oldObject={5} />

2. 仅允许对象类型（如果组件只需要处理对象） #

如果你的组件逻辑只针对对象，可以把约束收窄为object：

interface ComponentProps<T extends object> {
  oldObject: T
}

function Component<T extends object>({ oldObject }: ComponentProps<T>) {
  const newObject = {
    ...oldObject
  }
  return <div>hi</div>
}

3. 组件内部添加类型守卫（运行时+类型检查） #

如果不想用泛型约束，也可以在组件内部添加类型守卫，强制检查oldObject的类型，让TypeScript在类型不匹配时提示错误：

function Component<T>({ oldObject }: ComponentProps<T>) {
  if (typeof oldObject !== 'object' || oldObject === null) {
    throw new Error('oldObject must be a non-null object');
  }
  const newObject = {
    ...oldObject
  }
  return <div>hi</div>
}

// 当传入number时，TypeScript会提示“条件始终为true”，因为T是number，typeof oldObject是"number"，会触发错误分支

总结 #

无约束泛型本质上等价于unknown的宽松版，TypeScript不会主动为其做类型收缩检查。要保留TypeScript的错误检测能力，必须通过泛型约束、类型守卫等方式明确类型的合法范围，让TypeScript能够提前识别不合法的类型传入。

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