Метод 1: использование литералов шаблона
Один простой способ визуализации тегов HTML в TypeScript — использование литералов шаблона. Литералы шаблонов позволяют нам встраивать выражения в обратные кавычки (`) и создавать динамические строки.

const tag = 'h1';
const text = 'Hello, World!';
const html = `<${tag}>${text}</${tag}>`;
document.getElementById('myDiv').innerHTML = html;

Метод 2. Создание элементов с использованием DOM API
Другой подход заключается в использовании API объектной модели документа (DOM) для динамического создания HTML-элементов. TypeScript обеспечивает полный доступ к DOM API, упрощая создание элементов и манипулирование ими.

const tag = 'h1';
const text = 'Hello, World!';
const element = document.createElement(tag);
const textNode = document.createTextNode(text);
element.appendChild(textNode);
document.getElementById('myDiv').appendChild(element);

Метод 3: использование фреймворков React или Angular
Если вы создаете приложение React или Angular, вы можете воспользоваться преимуществами их мощных фреймворков на основе компонентов. Эти платформы предоставляют декларативный синтаксис и эффективные механизмы рендеринга.

Пример реакции:

import React from 'react';
const MyComponent = () => {
  return <h1>Hello, World!</h1>;
};
ReactDOM.render(<MyComponent />, document.getElementById('myDiv'));

Пример Angular:

import { Component } from '@angular/core';
@Component({
  selector: 'app-my-component',
  template: '<h1>Hello, World!</h1>'
})
export class MyComponent {}
// In your Angular template:
<app-my-component></app-my-component>

Метод 4: использование сторонней библиотеки
Существует несколько сторонних библиотек, которые упрощают рендеринг HTML в TypeScript. Одной из популярных библиотек являетсяlit-html, которая обеспечивает легкий и эффективный способ визуализации HTML-шаблонов.

npm install lit-html

import { html, render } from 'lit-html';
const tag = 'h1';
const text = 'Hello, World!';
const template = html`<${tag}>${text}</${tag}>`;
render(template, document.getElementById('myDiv'));