TypeScript类型不一致问题：col.ref为何有时是对象有时存疑？

问题原因 #

你遇到的是TypeScript类型收窄在回调函数中丢失的典型场景：

• 外层的!isString(col.ref)确实能把col.ref的类型从string | Object收窄为Object，所以外层的col.ref.id都能正常通过类型检查。
• 但onChange是一个回调函数，TypeScript无法保证当这个回调执行时，col的状态和类型仍然保持之前的收窄结果（比如可能存在异步操作或变量引用变化），因此在回调内部，col.ref的类型会回退到原始的string | Object，导致访问id时触发类型错误。

解决方法 #

方法1：提前提取id变量（推荐） #

在回调函数外部，先把col.ref.id提取为一个变量，回调里直接使用这个变量：

{allCols.map((col) => {
  if (isString(col.ref)) return null;
  const refId = col.ref.id; // 这里已经被类型收窄，refId是确定的类型
  return (
    <Table.Body.Row.Cell key={`opp-${opportunity.id}-col-${refId}`} className="relative min-w-[15rem]">
      <EditableInput
        value={values.get(opportunity, refId)} 
        input={( 
          <AllInputs
            value={values.get(opportunity, refId)} 
            inputType={values.getType(opportunity, refId)} 
            options={values.getOptions(opportunity, refId)} 
            onChange={(newVal:any) => values.set(opportunity, refId, newVal)} 
            className="bg-transparent border-0 focus:bg-white hover:border"
          />
        )}
      />
    </Table.Body.Row.Cell>
  )
})}

方法2：使用类型断言 #

如果能确保col.ref在回调执行时一定不是字符串，可以用类型断言强制指定类型：

onChange={(newVal:any) => values.set(opportunity, (col.ref as { id: string }).id, newVal)}

注意：类型断言需要你自己保证运行时的类型安全，避免潜在的报错。

方法3：优化isString为类型谓词 #

如果isString不是TypeScript内置的类型守卫，把它定义成类型谓词函数，让TypeScript更准确地识别类型收窄：

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

这个优化能让TypeScript更可靠地在外层收窄类型，但回调内部的类型丢失问题仍然存在，还是需要结合方法1或方法2解决。

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