En esta ocasión veremos cómo crear un proyecto Typescript con Vite.
Typescript es un lenguaje de programación considerado como una extensión del clásico Javascript. Con la peculiaridad de ser un lenguaje:
- De tipado estático.
- Compilado.
- Orientado a objetos.
- Capaz de detectar errores.
En pocas palabras, es un lenguaje de programación que aprendió de los errores de su predecesor y obtuvo su propia esencia.
Iniciamos con la creación de un proyecto Vite. Elegiremos Typescript como lenguaje base. La instrucción es la siguiente:
$ npm create vite
En el prompt pondremos como nombre del proyecto ``fundamentos``. Como framework elegiremos a ``Vanilla JS`` y como variante a ``Typescript``.
Ahora nos ubicaremos en el directorio creado y ejecutamos el proyecto:
$ cd fundamentos $ npm install $ npm run dev
El directorio lucirá como este:
fundamentos/ .gitignore index.html node_modules/ package-lock.json package.json public/ vite.svg src/ counter.ts main.ts style.css typescript.svg tsconfig.json
Dentro de la carpeta ``src`` crearemos un archivo llamado variables.ts.
fundamentos/ .gitignore index.html node_modules/ package-lock.json package.json public/ vite.svg src/ counter.ts
variables.ts
main.ts style.css typescript.svg tsconfig.json
Editaremos el archivo main.ts.
import './style.css' import typescriptLogo from './typescript.svg' import viteLogo from '/vite.svg' document.querySelector<HTMLDivElement>('#app')!.innerHTML = ` <div> <img src="${viteLogo}" class="logo" alt="Vite logo" /> <h1>Vite + TypeScript</h1> <div class="card"> <p>Hola, mundo con Typescript</p> <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" /> </div> </div> `;
El archivo index.html lucirá así:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>fundamentos</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.ts"></script> </body> </html>
Creando una función en el archivo variables.ts
Esta función nos servirá para el cálculo de nuevo salario de un empleado. El bono extra se efectuará si el empleado es casado y mayor de 40 años.
variables.ts
export function setSueldoFinal(element: HTMLElement){ let sueldoBruto: number = 30000.00; const porcentajeMax:number = 100.0 / 25.0; const porcentajeMin: number = 100.0 / 15.0; let edad: number = 44; let edoCivilCasado: boolean = true; const nombre:string = "Thomas Muller."; if(edoCivilCasado){ if(edad > 40){ sueldoBruto = sueldoBruto + (sueldoBruto * porcentajeMax); }else{ sueldoBruto = sueldoBruto + (sueldoBruto * porcentajeMin); } }else{ console.log(`Tu sueldo neto es: ${sueldoBruto}.`); element.innerHTML = `Nombre: ${nombre}. Edad: ${edad}. Tu sueldo neto es: ${sueldoBruto}.` } console.log(`Tu sueldo neto es: ${sueldoBruto}.`); element.innerHTML = `Nombre: ${nombre}. Edad: ${edad}. Tu sueldo neto es: ${sueldoBruto}.` }
Volvemos al archivo main.ts y agregamos el archivo variables.ts mediante su importación:
import './style.css' import typescriptLogo from './typescript.svg' import viteLogo from '/vite.svg' import { setSueldoFinal } from './fundamentos/variables.ts'; document.querySelector<HTMLDivElement>('#app')!.innerHTML = ` <div> <img src="${viteLogo}" class="logo" alt="Vite logo" /> <h1>Vite + TypeScript</h1> <div class="card"> <p id="parrf1"></p> <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" /> </div> </div> `; const parrf1 = document.querySelector<HTMLElement>("#parrf1"); if (parrf1) { setSueldoFinal(parrf1); }
Ejecutamos la aplicación:
$ npm run dev
Abrimos un navegador en la ruta: http://localhost:5173/
Salida:
Nombre: Thomas Muller. Edad: 44. Tu sueldo neto es: 150000.
Conclusiones:
- Vite es una herramienta que nos facilita el desarrollo aplicaciones web.
- Ofrece un servidor de desarrollo instantáneo con recarga en caliente (HMR) ultrarrápido y compilaciones optimizadas para producción.
- Es compatible con frameworks populares como React, Vue y Svelt.
- Además de poder usar Typescript como lenguaje base, ya que se ha convertido en el lenguaje más usado tanto en React como Angular y demás herramientas similares.
Podríamos extender este post. Pero considero que es suficiente por el momento.
Continuaremos con estas entregas sobre Typescript y Vite.
Enlaces:
https://vite.dev/https://www.typescriptlang.org/
https://dev.to/nixcko/como-empezar-con-typescript-usando-vite-configuracion-y-compilacion-simplificadas-53k4
Comentarios
Publicar un comentario