Typescript 自定义类型守卫和数组操作

Question

Sorry if this is a duplicate but I couldn't find the answer I am looking for.

I am starting to experiment with TypeScript and I came across used-defined type guards . I wanted to use them to check if an array is empty but I can't figure out how to do it properly. This is what I tried so far.

function isEmpty<T>(array: Array<T>): array is [] {
  return array.length === 0;
}  

const arr = ['a', 'b', 'c'];
const result: string[] = [];

while (!isEmpty(arr)) {
  result.push(arr.pop())
  //          ^^^^^^^^^ Type error here because pop() returns string or undefined if the array is empty 
}

It seems that TypeScript is unable to narrow down the return type of Array.prototype.pop() as it doesn't have access to its implementation and just relies on the function's signature.

Is there a way to make this work? I am most interested in readability and type safety. Thank you for your time

Answer 1

You need to use type assertion to tell the compiler what will the type of items arr.pop() return be because arr could be empty and the type of result variable is an array of strings. So the code will look like this:

const isEmpty = <T>(array: T[]): array is [] => {
  return array.length === 0;
};

const arr = ["a", "b", "c"];
const result: string[] = [];

while (!isEmpty(arr)) {
  result.push(arr.pop() as string);
}