Cómo empezar con TypeScript y Parcel

TypeScript es una tecnología que crece cada día. Empresas como Slack, Airbnb o Google están migrando sus bases de código JavaScript a TypeScript.

Frameworks como Vue, React y Angular utilizan TypeScript para escribir código mantenible y escalable.

En este artículo te muestro los pasos para iniciar un proyecto con TypeScript y Parcel de forma rápida.

El código completo está disponible en https://github.com/danywalls/hello-typescript.

Crear una estructura básica del proyecto

La estructura de la aplicación es simple: dos clases de TypeScript (User.ts y App.ts) y un archivo index.html.

app/App.ts
app/User.ts
index.html 
 

Configurar Parcel y tareas de NPM

Parcel es un paquete de npm para transformar, compilar y empaquetar recursos sin configuraciones complejas. También incluye un servidor de desarrollo con recarga en caliente (hot-reload).

El primer paso es instalar las dependencias del proyecto.

npm install -D parcel parcel-bundler
 

Crea los scripts dev y build en tu archivo package.json. Estas tareas permiten ejecutar el servidor de desarrollo y compilar el proyecto.

"scripts": {
        "dev": "parcel index.html",
        "build": "parcel build dist"
    }
 

Escribir el código de la aplicación

El archivo User.ts define una clase. Esta clase tiene un constructor con dos parámetros: name y age.

El método hello devuelve una cadena de texto con el nombre y la edad.

export class User {
    constructor(public name: string = "no name", public age: Number = 35) { }
    hello(): string {
        return `Hi ${this.name} your age is ${this.age} `;
    }
}
 

Importa la clase User dentro de App.ts. Agrega una función para el evento window.onload. Este proceso actualiza el elemento con el id title con el resultado del método hello.

import { User } from "./User";
 
window.onload = () => {
  let title = document.querySelector("#title");
  const tsUser = new User("Dany Paredes", 36);
  if (title) title.innerHTML = tsUser.hello();
};
 

Edita el archivo index.html e importa App.ts:

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello Typescript</title>
</head>
<body>
    <div name="container">
        <h2 id="title"></h2>
    </div>
    <script src="app/App.ts"></script>
</body>
</html>
 

Ejecuta el comando npm run dev para iniciar el servidor web en http://localhost:1234.

Conclusión

Esto te da un punto de partida rápido para comenzar con TypeScript y Parcel. Si te sirvió este artículo, compártelo.

Foto por Braden Collum en Unsplash