TypeScript提示Object possibly 'null'，as HTMLInputElement报错as any却正常？

导致该TypeScript编译错误的核心原因是严格空值检查机制识别到代码中存在多处可能为空的运行时风险点：

• document.getElementById('fileName') 若页面不存在对应ID的元素，返回值为null，你仅做了类型断言但未处理空值场景
• 文件输入框的files属性原生类型为FileList | null，未选择文件时该属性值为null
• 即使files不为空，未选择文件时files[0]也会返回undefined，无法读取size属性

使用as any相当于直接关闭了所有类型校验，虽然编译阶段不再报错，但运行时遇到上述空值场景依然会抛出异常，属于不安全的写法。

标准做法是提前对所有可能为空的节点做边界校验，拦截非法场景后再执行后续校验逻辑，也可以配合TS原生支持的可选链运算符简化空值判断代码。

private validateFileType() {
  // 先获取输入框元素，兼容空值场景
  const fileInput = document.getElementById('fileName') as HTMLInputElement | null;
  // 拦截元素不存在、未选择文件的场景
  if (!fileInput?.files?.length) {
    // 此处可添加「请先选择文件」的提示逻辑
    return;
  }
  const targetFile = fileInput.files[0];
  const maxAllowedSize = 5 * 1024 * 1024;
  const allowedTypes = ['xls', 'xlsx'];

  // 校验文件类型
  const fileExt = targetFile.name.split('.').pop()?.toLowerCase() ?? '';
  if (!allowedTypes.includes(fileExt)) {
    // 此处可添加文件类型不符合的提示逻辑
    return;
  }

  // 校验文件大小
  if (targetFile.size > maxAllowedSize) {
    // 此处可添加文件大小超出限制的提示逻辑
    return;
  }

  // 校验通过后的后续业务逻辑
}

该实现完全符合TypeScript类型规范，没有使用任何any类型，同时覆盖了所有空值边界场景，编译阶段不会报错，运行时稳定性也更高。

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