TypeScript中typeof条件判断后类型不兼容报错的解决方法

问题出在TypeScript对嵌套属性的类型收窄支持有限：你虽然通过判断排除了event.target.result为null或非字符串的情况，但TS无法确定两次访问event.target.result之间这个值不会被修改（尽管实际场景中不可能发生），因此依然保留了null的类型可能性，导致编译报错。

下面是两种可行的修复方式：

方法1：用临时变量存储结果，让TS正确推导类型 #

将event.target.result赋值给一个临时变量后，TS会跟踪这个变量的类型判断结果，自动完成类型收窄：

async function readSuccess(event: ProgressEvent<FileReader>) {
  let routeXML = '';
  if (event.target === null) {
    alert('Cannot read file');
    return;
  }
  // 把result存到临时变量
  const result = event.target.result;
  if (typeof result !== "string") {
    alert('File contents have incorrect type');
    return;
  }
  // 此时TS能确定result是string类型
  routeXML = result;
  // ... 后续业务逻辑
}

方法2：使用类型断言明确类型 #

如果你能100%确认当前分支下result为字符串，可以直接用类型断言告诉TS忽略剩余的类型可能性：

async function readSuccess(event: ProgressEvent<FileReader>) {
  let routeXML = '';
  if (event.target === null) {
    alert('Cannot read file');
    return;
  }
  if ((typeof event.target.result) !== "string") {
    alert('File contents have incorrect type');
    return;
  }
  // 用as string断言类型
  routeXML = event.target.result as string;
  // ... 后续业务逻辑
}

两种方法都能解决编译错误，方法1更符合TypeScript的类型安全理念，方法2则更简洁直接。

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