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

Чтобы типизировать элементы HTML [Script | Link и т.д.] в операторе switch в TypeScript, вы можете использовать объединение типов (union types) и тип проверку (type guarding).

В TypeScript, чтобы представить все возможные типы элементов, вам нужно объединить их с помощью оператора |. Например, если вы хотите типизировать элементы <script> и <link>, ваш тип будет выглядеть следующим образом: HTMLScriptElement | HTMLLinkElement.

Когда вы используете оператор switch, TypeScript должен определить, какой тип имеет переменная, чтобы выбрать соответствующий блок кода. В этом случае вы можете использовать тип проверку внутри каждого блока case для определения типа переменной.

Например, предположим, у вас есть следующий код:

function handleElement(element: HTMLScriptElement | HTMLLinkElement) {
  switch (element.tagName) {
    case 'SCRIPT':
      // типизированный блок для элемента <script>
      break;
    case 'LINK':
      // типизированный блок для элемента <link>
      break;
    default:
      // блок по умолчанию
      break;
  }
}

В этом примере, в зависимости от значения tagName (которое является свойством элемента), TypeScript будет знать, что переменная element имеет тип HTMLScriptElement, если tagName равно 'SCRIPT', или тип HTMLLinkElement, если tagName равно 'LINK'. Вы можете выполнять типизированные действия внутри каждого блока case в соответствии с определенным типом.

Однако, если у вас есть большое количество элементов, определение типа для каждого элемента может быть ресурсоемким процессом. В этом случае, вы можете использовать общий тип HTMLElement и проверять его тип, используя оператор as. Но будьте осторожны, поскольку наличие общего типа может сузить количество доступных свойств и методов для каждого элемента. Таким образом, это требует дополнительных проверок на соответствие типу.

function handleElement(element: HTMLElement) {
  switch (element.tagName) {
    case 'SCRIPT':
      const scriptElement = element as HTMLScriptElement;
      // типизированный блок для элемента <script>
      break;
    case 'LINK':
      const linkElement = element as HTMLLinkElement;
      // типизированный блок для элемента <link>
      break;
    default:
      // блок по умолчанию
      break;
  }
}

В этом примере, element имеет тип HTMLElement, но мы проверяем его тип с помощью оператора as и приводим его к типу HTMLScriptElement или HTMLLinkElement. Это позволяет нам работать с типизированными свойствами и методами внутри каждого блока case.

В итоге, чтобы типизировать элементы HTML [Script | Link и т.д.] в операторе switch в TypeScript, вы можете использовать объединение типов и тип проверку для определения типа переменной и выполнения соответствующих действий на основе этого типа.