使用`in`进行TypeScript类型收窄时遭遇的类型错误问题

问题原因 #

你定义的type A = { a?: string }是可选字段类型，它包含两种情况：

• 对象中完全没有a字段
• 对象中存在a字段，但值为string | undefined

"a" in a仅能判断对象里存在a这个字段，但无法保证字段的值不是undefined，所以TypeScript依然会将a.a的类型推断为string | undefined，导致传入要求string类型的check函数时触发类型错误。

解决方案 #

方案1：直接检查字段值是否不为undefined

将判断逻辑改为直接校验a.a的值，TypeScript会自动完成类型窄化：

function check(param: string) {
  // just check the type
}

type A = {
  a?: string
}

function q(a: A) {
  if (a.a !== undefined) {
    check(a.a) // 类型被正确窄化为string，无报错
  }
}

方案2：使用自定义类型守卫

如果需要更复杂的判断逻辑，可以定义类型守卫函数，明确告知TypeScript当前的类型状态：

function check(param: string) {
  // just check the type
}

type A = {
  a?: string
}

function hasValidA(obj: A): obj is { a: string } {
  return "a" in obj && obj.a !== undefined;
}

function q(a: A) {
  if (hasValidA(a)) {
    check(a.a) // 类型守卫确保a.a为string，无报错
  }
}

方案3：调整类型定义（业务允许时）

如果你的业务逻辑中，只要a字段存在就一定有有效值，可以将类型改为字段必存在但值可能为undefined，而非可选字段：

function check(param: string) {
  // just check the type
}

// 字段a必存在，值为string | undefined
type A = {
  a: string | undefined
}

function q(a: A) {
  if (a.a !== undefined) {
    check(a.a) // 无报错
  }
}

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