What should I use Array.from or spread operator [...] in Typescript

what happens behind the hoods

In order to understand what is going on, we need to look at how typescript defines the signature for Array.from and querySelectorAll. Excerpts:

from<T>(arrayLike: ArrayLike<T>): T[];
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;

For Array.from, it means that, given a type T, it will return an array of elements with type T. If no T is given, it could be anything.

Specifying a type for the return value of the function is actually saying: "please take T = HTMLElement". In turn, that implies the argument arrayLike will have type ArrayLike<HTMLElement>. NodeListOf<E> will match this by taking E = HTMLElement, which does extend Element, so it is valid, and typescript is happy.

why does typescript behave so?

Because you are deliberately giving the HTMLElement type for the return value, typescript trusts you and is capable to give specific types to E and T.

to go beyond

Interestingly, the following code would raise a typescript error:

function selectAll(DOMElement: string, parent = document): Array<HTMLElement>  {
  const all = parent.querySelectorAll(DOMElement);
  return Array.from(all);
}

This is because on the line defining all, there is no information whatsoever about what type E could be, so it defaults to being Element. When parsing the return line, TS will (rightly) complain that Element cannot map to HTMLElement.

Conclusion

To your questions:

• use spread operator or Array.from => in your case, spread operator is not an option since it raises an error, which Array.from does not
• why querySelector is okay with returning HTMLElement instead of just Element? => hopefully, the above has clarified why

I played around with the snippet you've provided and I think Array.from casts Element[] into HTMLElement[]

function selectAll(DOMElement: string, parent = document): Array<HTMLElement> | null {
    const m : Array<HTMLElement> | null=  Array.from(parent.querySelectorAll(DOMElement));
    return m
}


function selectAll2(DOMElement: string, parent = document): Array<HTMLElement> | null {
    const m =  Array.from(parent.querySelectorAll(DOMElement));
    return m
}

If you check selectAll2 will throw an error.

And this won't work in

const arr = ["a","b"];

const setup1 = () : number[] => {
    return [...arr]
}

const setup1 = () : number[] => {
    return Array.from(arr)
}

cause HTMLElement is a child class of Element[] itself.