Uso con TypeScript

Ahora vamos a ver como Vite detecta y procesa los archivos de TypeScript sin la necesidad de tener que hacer una configuración complicada, aunque si nosotros lo deseamos podemos cambiar esa configuración por defecto y que TS se comporte como nosotros queramos.

Usando TS con Vite

Para comenzar a utilizar TS con nuestro proyecto literalmente no tenemos que hacer nada, es por esto que podemos crear un archivo, en este caso tendremos el ejemplo de suma.ts, en el cual exportaremos una función que sume dos números.

//suma.ts
export default function suma(a: number, b: number): number {
  return a + b;
}

Ahora podemos importar nuestra función en main.js y Vite detectara automáticamente que es un archivo de TS, además se encargara de procesarlo. Para esto podremos imprimir el resultado de nuestra función y veremos que el resultado es el esperado.

import suma from "./suma";
console.log(`2 + 3 es ${suma(2, 3)}`);

// 2 + 3 es 5

Configuración personalizada de TS

Si queremos cambiar la configuración por defecto de Vite para TS podemos hacerlo a través del tsconfig.json, un archivo que se genera en la raíz del proyecto y donde podremos agregar nuestras configuraciones personalizadas. En este caso agregaremos configuraciones de ejemplo, pero puedes emplear cualquier configuración que tú quieras.

La configuración que cambiaré será el target, para esto vamos a utilizar la opción compilerOptions (opción que permite personalizar la construcción para producción) y dentro de esta definiremos nuestro target (Define la versión de JS que queremos para el código en producción) para la versión de JS ES2015.

{
  "compilerOptions": {
    "target": "ES2015"
  }
}

Para que los cambios se apliquen de forma correcta se recomienda reiniciar el entorno de desarrollo y borrar el cache.

Por ultimo si deseas saber mas del tsconfig y sus diferentes opciones, puedes visitar este enlance oficial de la documentacion de TypeScript.

Contribución creada por: Jofay Zhan Segura