TypeScript显式指定值类型后为何无法推断对象字面量键？

代码示例对比 #

正常推导场景 #

function define<T>(asset: T): T {
  return asset
}

const assets = define({
  header: { color: 'red' },
  button: { color: 'red' },
})

assets.header.color // 正常，无预期错误
assets.button.color // 正常，无预期错误
assets.footer.color // 正常，因`footer`不存在而报错。

显式指定Schema后的异常场景 #

function define<S, T = Record<string, S>>(asset: T): T {
  return asset
}

const assets = define<{ color: string }>({
  header: { color: 'red' },
  button: { color: 'red' },
})

assets.header.color // 正常，无预期错误
assets.button.color // 正常，无预期错误
assets.footer.color // 异常，预期报错但未抛出错误

问题 #

1. 为何会出现这种情况？为什么assets.footer.color不报错？
2. 是否有修复方案？若有，如何实现？

问题原因 #

当显式指定泛型参数S时，TypeScript会触发默认类型Record<string, S>，将T推导为Record<string, { color: string }>，而非包含header、button字面量键的精确对象类型。Record<string, S>代表键为任意字符串的对象，所以访问assets.footer会被判定为合法，自然不会抛出错误。本质是默认类型让TypeScript放弃了对传入对象字面量的精确键推导，转而使用宽泛的字符串键类型。

修复方案 #

方案一：泛型约束精确推导

调整泛型定义，通过约束确保T的每个值匹配S，同时保留键的字面量类型：

function define<S, T extends Record<string, S>>(asset: T): T {
  return asset
}

const assets = define<{ color: string }, _>({
  header: { color: 'red' },
  button: { color: 'red' },
})

assets.header.color // 正常
assets.button.color // 正常
assets.footer.color // 报错，符合预期

方案二：柯里化函数优化推导

通过柯里化先指定值类型S，再让TypeScript自动推导对象键的字面量类型：

function define<S>() {
  return function <T extends Record<string, S>>(asset: T): T {
    return asset
  }
}

const assets = define<{ color: string }>()({
  header: { color: 'red' },
  button: { color: 'red' },
})

assets.header.color // 正常
assets.button.color // 正常
assets.footer.color // 报错，符合预期

这种写法既保证了对象值的类型符合指定的S，又保留了键的精确字面量类型，完美解决问题。

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