如何在 typescript 中键入非空数组？

Question

如果未预先检查数组是否为空，我希望 typescript 编译器在尝试直接访问数组的任何元素时抛出“对象可能是'未定义'”错误，因此您始终必须检查该元素是否未定义，例如，使用可选链

如果预先检查了数组不为空，那么您需要能够像往常一样访问其元素，而无需检查其元素是否未定义

我需要这个以确保数组不为空，因此如果它为空，则对其任何元素的访问将立即返回 undefined 然后链接将不会继续，并且不会出现无法读取 undefined 属性等可能的错误

我该怎么做呢？

代码示例，也许它会让我的问题更清楚

interface Element {
  a: {
    aa: string;
    bb: string;
  };
  b: {
    aa: string;
    bb: string;
  };
}

const element: Element = {
  a: { aa: "aa", bb: "bb" },
  b: { aa: "aa", bb: "bb" },
};

type ElementArray = Element[];

const array: ElementArray = [element, element];
const emptyArray: ElementArray = [];

const getFirstAWithoutLengthCheck = (array: ElementArray) => {
  return array[0].a; // i want the typescript compiler to throw an 'Object is possibly 'undefined'' error here
};

const getFirstAWithLengthCheck = (array: ElementArray) => {
  if (array.length) {
    return array[0].a; // shouldn't be any errors
  }
  return null;
};

const getFirstAOptChaining = (array: ElementArray) => {
  return array[0]?.a; // shouldn't be any errors
};

// will throw error cannot read property a of undefined, so we need to use
// optional chaining or length check in this function, but typesript is not requiring it
console.log(getFirstAWithoutLengthCheck(array)); // aa
console.log(getFirstAWithoutLengthCheck(emptyArray)); // crash!

// checking array length, access to first element should work as usual, no errors
console.log(getFirstAWithLengthCheck(array)); // aa
console.log(getFirstAWithLengthCheck(emptyArray)); // null

// optional chaining, no errors
console.log(getFirstAOptChaining(array)); // aa
console.log(getFirstAOptChaining(emptyArray)); // undefined

Answer 1

正如@Roberto Zvjerković 评论的那样，您需要使用noUncheckedIndexedAccess编译器标志。

Playground （该链接已打开noUncheckedIndexedAccess标志）。

但是，您需要使用if (array.length)而不是if (array[0]) 。 这是因为，即使长度不为零，也不能确保元素是“未定义的”。 如果数组是array = [undefined] ，它应该给出运行时错误。 如果它可以包含undefined的数组，则它与数组的类型无关。

Answer 2

我设法让 TypeScript 在第一个示例中抛出一个错误，而不是在第三个示例中抛出一个错误，但遗憾的是它在第二个示例中给出了未定义的错误。 希望这可以帮助你：

interface Element {
  a: {
    aa: string;
    bb: string;
  };
  b: {
    aa: string;
    bb: string;
  };
}

const element: Element = {
  a: { aa: "aa", bb: "bb" },
  b: { aa: "aa", bb: "bb" },
};

type ElementArray = [] | [Element] | [Element, ...Element[]];

const array: ElementArray = [element, element];
const emptyArray: ElementArray = [];

const getFirstAWithoutLengthCheck = (array: ElementArray) => {
  return array[0].a; // i want the typescript compiler to throw an 'Object is possibly 'undefined'' error here
};

const getFirstAWithLengthCheck = (array: ElementArray) => {
  if (array.length) {
    return array[0].a; // shouldn't be any errors
  }
  return null;
};

const getFirstAOptChaining = (array: ElementArray) => {
  return array[0]?.a; // shouldn't be any errors
};

// will throw error cannot read property a of undefined, so we need to use
// optional chaining or length check in this function, but typesript is not requiring it
console.log(getFirstAWithoutLengthCheck(array)); // aa
console.log(getFirstAWithoutLengthCheck(emptyArray)); // crash!

// checking array length, access to first element should work as usual, no errors
console.log(getFirstAWithLengthCheck(array)); // aa
console.log(getFirstAWithLengthCheck(emptyArray)); // null

// optional chaining, no errors
console.log(getFirstAOptChaining(array)); // aa
console.log(getFirstAOptChaining(emptyArray)); // undefined

TypeScript 操场忽略元素上的错误，TypeScript 操场认为该元素是 DOM 元素