Как типизировать HTML[Script | Link и тд]Element в switch?

Question

[Александр Антонов]

Если массив объектов с тегами которые я хочу вставить в верстку, пример такой

interface TagListType = {
   tag: "script" | "link";
   attr: HTMLAttributes<HTMLScriptElement | HTMLLinkElement>[];
   url: string;
 }[];

const tagListExample = [
    {
      tag: "script",
      url: "...",
      attr: [],
    },
    {
      tag: "link",
      url: "...",
      attr: [],
    },
  ];

Все это дело приходит с сервера в виде json так что приходиться типизировать на лету, в общем этот массив я прогоняю через цикл и создаю ноду через createElement

for (const { tag, url, attr} of tagListExample ) {
        // type SwitchHtmlElement<T> = "???"
        // тип ноды HTMLScriptElement | HTMLLinkElement
        const node = document.createElement(tag);
       
        switch (tag) {
          case "script": {
            node.src = `${STATIC_URL}/js/${url}`;
            break;
          }
          case "link": {
            node.href = `${STATIC_URL}/css/${url}`;
            break;
          }
        }
      }

Но проблема в том что в свиче тип ноды не подхватывается на лету, так как я его определяю только по самому тексту тега а надо что бы в свитче уже был определенный тип у ноды, HTMLScriptElement в случае с блоком "script"

Comments

[WbICHA]

Для начала у тебя тип неправильный.

type TagListType = ({
   tag: "script";
   attr: HTMLAttributes<HTMLScriptElement>[];
   url: string;
 } | {
   tag: "link";
   attr: HTMLAttributes<HTMLLinkElement>[];
   url: string;
 })[];

надо что бы в свитче уже был определенный тип у ноды

Для этого надо присваивать значение внутри кейсов. В целом, можно сделать так (убого, но тип будет автоматически определяться):

for (const v of tagListExample ) {
        let node: HTMLScriptElement | HTMLLinkElement
       
        switch (v.tag) {
          case "script": {
            node = document.createElement(v.tag);
            node.src = `${STATIC_URL}/js/${v.url}`;
            break;
          }
          case "link": {
            node = document.createElement(v.tag);
            node.href = `${STATIC_URL}/css/${v.url}`;
            break;
          }
        }
      }

Либо тогда уже вручную кастить тип внутри кейсов.

[Александр Антонов]

WbICHA, В принципе неплохо выглядит, пока что плевать на эстетику, самое главное что бы работало, спасибо за ответ

[Александр Антонов]

WbICHA, мне там еще атрибуты надо прокидывать, во какую обертку сделал что бы код не дублировать в свитчах, как тебе?

const getKeys = Object.keys as <T extends object>(obj: T) => Array<keyof T>;

type HTMLSwitchElement = HTMLScriptElement | HTMLLinkElement;

type CNIHT = <T extends HTMLSwitchElement>(
  node: T,
  attr: HTMLAttributes<T>
) => void;

const createNodeInHead: CNIHT = (node, attr) => {
  getKeys(attr).forEach((key) => {
    node.setAttribute(key, attr[key]);
  });

  document.head.appendChild(node);
};

[WbICHA]

Александр, код как код. На картину надо смотреть целиком, а не вглядываться в кусочек, поэтому нормально оценить всё равно не получится.
Весь код можешь не скидывать, смотреть не буду.