'cloneNode result not passable to Jquery append in TypeScript
The following code uses cloneNode to create a new Node but JQuery doesn't consider it to be a Node
when trying to pass it into the append function. Why not?
const addLinesBad = function(lines: string[]) {
const br = document.createElement('br');
for (let line of lines) { //simplified for example
$('#content').append(document.createTextNode(line));
const newBR = br.cloneNode(); //newBR is of type 'Node'
const newBRJquery = $(newBR); //This is a JQuery<Node> but doesn't help in the next line
/* TS(2769) Error on next line: No overload matches this call.
Overload 1 of 2, '(...contents: (string | TypeOrArray<Node | JQuery<Node>>)[]): JQuery<HTMLElement>', gave the following error.
Argument of type 'Node' is not assignable to parameter of type 'string | TypeOrArray<Node | JQuery<Node>>'.
Type 'Node' is missing the following properties from type 'DocumentFragment': getElementById, childElementCount, children, firstElementChild, and 6 more.
Overload 2 of 2, '(funсtion: (this: HTMLElement, index: number, html: string) => string | TypeOrArray<Node | JQuery<Node>>): JQuery<HTMLElement>', gave the following error.
Argument of type 'Node' is not assignable to parameter of type '(this: HTMLElement, index: number, html: string) => string | TypeOrArray<Node | JQuery<Node>>'.
Type 'Node' provides no match for the signature '(this: HTMLElement, index: number, html: string): string | TypeOrArray<Node | JQuery<Node>>'.
*/
$('#content').append(newBR);
}
}
With the expected parameter type TypeOrArray<Node | JQuery<Node>> I would expect a Node or a JQuery to work just fine, but neither do.
The JQuery type definitions include:
declare namespace JQuery {
type TypeOrArray<T> = T | T[];
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
