Почему я не могу установить идентификатор моего клона узла при использовании метода cloneNode в js?

Question

Я пытаюсь создать клон элемента Div с методом cloneNode, а затем хочу установить идентификатор клона с помощью метода setAttribute, но я получаю эту ошибку:

Свойство 'setAttribute' не существует для типа 'Узел'.

Вот мой HTML:

<div id="containerParentId" class="row boundary">

<div class="col no-padding" id="containerId" 
(drop)="onDrop($event)" 
(dragover)="onDragOver($event)" 
(dragleave)="onLeave($event)">

    <div class="vl" id="verticalLine" ></div>

    <div id="divTable" class="tableOnePosition"
    draggable="true"
    (dragstart)="onDragStart($event)"
    (drag)="onDrag($event)"
    (dragend)="onDragEnd($event)"

    ></div>
</div>

А вот код js:

let clone = document.getElementById('divTable').cloneNode(true);

clone.setAttribute('id','newId');

Я использую Angular в качестве основы веб-интерфейса.

Я читал разные вопросы об этом, и это должно быть возможно, насколько я могу видеть. Примером этого вопроса является: Можно ли клонировать html объекты элементов в JavaScript / JQuery?

Answer 1

.cloneNode() возвращает Node, но .setAttribute() доступно только для Element с (или получено виды этого). И вот что TypeScript сообщает вам с предупреждением / ошибкой.

Вы должны сообщить TypeScript, что узел, возвращаемый .cloneNode(), на самом деле является Element / HTMLElement / HTMLDivElement. Для этого TypeScript знает концепцию подтверждений типа (что аналогично приведению типов в других языках).

Существует две формы для указания типа:

1. < Type > -> const d = <HTMLDivElement> document.querySelector("div")
2. as -> const d = document.querySelector("div") as HTMLDivElement

Ваш сценарий будет выглядеть следующим образом:

const clone = <HTMLDivElement> document.getElementById('divTable').cloneNode(true);

или

const clone = document.getElementById('divTable').cloneNode(true) as HTMLDivElement;

Пример на TypeScript Playground