TypeScript报错：if块内event.target仍提示可能为null（TS2531）

问题原因 #

你已经通过if (event.target)判断了非空，但TypeScript仍然报错，是因为Event类型的target属性是EventTarget | null，直接在判断后使用event.target时，TypeScript的类型系统无法持续跟踪这个属性的非空状态——它会认为后续代码中event.target仍有可能变为null（尽管实际运行中不会发生）。

解决方案 #

方案1：将event.target存入局部变量 #

把event.target赋值给一个局部变量，TypeScript就能准确跟踪这个变量的类型，消除报错：

const importDatabase = async (event: Event) => {
  const target = event.target;
  if (target) {
    const file = (target as HTMLInputElement).files[0];
    const connection = getDbConnection();

    const reader = new FileReader();
    reader.onload = async (e) => {
      const data = new Uint8Array(e.target!.result as ArrayBuffer);
      console.info('Importing database...', data);
      connection.sqljsManager.loadDatabase(data);
      await connection.synchronize(false);
    };
    reader.readAsArrayBuffer(file);
  }
};

方案2：更严谨的类型判断（推荐） #

直接判断target是否为HTMLInputElement，既解决null问题，又确保后续访问files属性的安全性：

const importDatabase = async (event: Event) => {
  const target = event.target;
  if (target instanceof HTMLInputElement) {
    const file = target.files[0];
    const connection = getDbConnection();

    const reader = new FileReader();
    reader.onload = async (e) => {
      const data = new Uint8Array(e.target!.result as ArrayBuffer);
      console.info('Importing database...', data);
      connection.sqljsManager.loadDatabase(data);
      await connection.synchronize(false);
    };
    reader.readAsArrayBuffer(file);
  }
};

额外说明 #

方案2中使用instanceof做类型校验，比单纯判断非空更可靠：它不仅排除了null，还确保target确实是文件输入元素，避免了因target是其他DOM元素导致files属性不存在的潜在错误。

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