TypeScript数组索引元素存在性检查及非空断言禁用下的报错解决

以下是几种无需非空断言的可行解决方案：

方案1：提取局部变量追踪类型 #

把数组元素提取到局部变量中，让TypeScript能明确识别后续判断后的类型：

{[0, 1, 2, 3, 4].map((index) => {
  const image = images[index];
  return (
    <div
      className="relative aspect-square w-full max-w-[180px] rounded-md border dark:border-primary-dark"
      key={`image-${index}`}
    >
      {image && (
        <Image
          className="rounded-md object-cover"
          fill
          alt=""
          src={URL.createObjectURL(image.file)}
        />
      )}
    </div>
  );
})}

通过将images[index]赋值给局部变量image，TypeScript会关联后续的非空判断，确认image不存在undefined的可能。

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

定义一个类型守卫函数，明确告诉TypeScript判断后的变量类型：

function isDefined<T>(value: T | undefined): value is T {
  return value !== undefined;
}

之后在代码中替换原有的判断逻辑：

{[0, 1, 2, 3, 4].map((index) => (
  <div
    className="relative aspect-square w-full max-w-[180px] rounded-md border dark:border-primary-dark"
    key={`image-${index}`}
  >
    {isDefined(images[index]) && (
      <Image
        className="rounded-md object-cover"
        fill
        alt=""
        src={URL.createObjectURL(images[index].file)}
      />
    )}
  </div>
))}

类型守卫会让TypeScript精准识别：当函数返回true时，images[index]必然是非undefined的。

方案3：调整数组类型为元组 #

如果业务逻辑能保证images数组的0-4索引位置一定有值，可以将数组类型改为元组，明确指定这些位置的元素非空：

// 定义为长度5的元组，每个元素都是非空的File类型
const images: [File, File, File, File, File] = /* 你的数组初始化逻辑 */;

这样TypeScript会直接认定images[0]到images[4]不存在undefined的情况，不会触发报错。

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