• Hola Mundo
• Manipular DOM
• Funciones, variables y tipos

Cree un proyecto nuevo en stackblitz seleccionando TypeScript Blank Project. En realidad el proyecto que se crea no está vacío. Ya contiene tres siguientes archivos: index.html, index.ts y style.css.

// Import stylesheets
import './style.css';

// Write TypeScript code!
const appDiv: HTMLElement = document.getElementById('app');
appDiv.innerHTML = `<h1>TypeScript Starter</h1>`;

Las instrucciones son:

1. Importar los estilos definidos en el archivo local style.css
2. Declarar una constante llamada appDiv cuyo tipo es un tipo predefinido llamado HTMLElement. A la constante le asigna de valor el elemento del archivo index.html que está identificado con app.

Las cosas básicas que se puede hacer con los elementos de tipo HTMLElement son :

• obtener el valor de los elementos
• obtener propiedades de los elementos y del documento
• cambiar el valor de los elementos
• crear elementos
• borrar elementos

En este ejemplo se modifica el elemento Html agregándole un nuevo elemento <h1>TypeScript Starter</h1>. Podemos cambiar el texto dentro de las etiquetas h1 por "Hola Mundo" y tendremos nuestro primer "Hola Mundo" en Html-Typescript.

El siguiente ejemplo muestra otras manipulaciones del DOM:

En este ejemplo veremos más manipulaciones del DOM, la definición/llamado de una función y una variable numérica. El objetivo es crear una página con un botón que cada vez que se le haga clic cree un nuevo botón con la palabra Hola y un número que indica el número de veces que se ha hecho clic. La imagen muestra la idea:

Para desarrollar el ejemplo empezamos creando en stackblitz un proyecto en blanco Typescript.

Al archivo index.html le agregamos un elemento para crear el primer botón. Note que este botón tiene un identificador llamado "btn-tryButton":

<div id="app">
	<p>Clic en el botón para crear un nuevo botón</p>
	<button id="btn-tryButton">Clic</button>
</div>

El código TypeScript consiste de:

• La declaración de una constante que contendrá el botón inicial.
• La declaración de una variable de tipo numérico (number) que arranca en cero y que se incrementará cada vez que se haga clic.
• Una instrucción para que sea ejecutada cada vez que se hace clic al botón. Esta instrucción invoca la función que está definida más adelante newButton().
• La declaración de la función newButton(), que crea un nuevo botón, le asigna de texto la palabra hola y el contador y se lo asigna al elemento principal del Html.

// Import stylesheets
import './style.css';

const appDiv: HTMLElement = document.getElementById('app');
const btnNewButton: HTMLElement = document.getElementById('btn-tryButton');
var clickCount: number = 0; 
btnNewButton.onclick = () => newButton();

function newButton() {
    clickCount++;
    var btn = document.createElement("BUTTON"); 
    btn.textContent = "Hola "+clickCount;
    appDiv.appendChild(btn);
}

• Modificar los dos archivos del index(.ts y .htlm) para que los nuevos botones se generen verticalmente (debajo del botón inicial).
  

• Agregar una función al archivo index.ts que aumenta el valor numérico de los botones generados al hacerles clic. Por ejemplo si el botón dice Hola 1 después de hacerle clic debe decir Hola 2.

• Modificar el desafío inicial para que solo el ultimo botón creado pueda crear un nuevo botón.