Instalar y configurar TypeScript
TypeScript es un lenguaje de programación fuertemente tipado basado en JavaScript. De hecho, es un superconjunto de JavaScript. En este post veremos cómo instalarlo y cómo configurarlo en cualquier proyecto existente o nuevo.
Instalación
Para instalar typescript basta ejecutar el siguiente comando. Esto te permitirá usar typescript en cualquier directorio.
npm install -g typescriptUna vez instalado podrás ver la versión instalada con el siguiente comando:
server@user$ tsc --version
Version 4.8.2Configuración
Para configurar typescript debe crearse en la carpeta root del proyecto un archivo llamado tsconfig.json con el siguiente scaffolding:
{
"compilerOptions": {
...
}
}Incluso podrías creaer el archivo de configuración con un objeto vacío {} y TypeScript tomará todos los valores por defecto.
Target
Esta opción le dice al compilador que versión de ECMAScript se generará como código resultante, o lo que es lo mismo, desde que versión es compatible. Si no se especifica un valor de versión se tomará por defecto ES3. Ej:
{
"compilerOptions": {
"target": "es5"
}
}Si estás usando alguna herramienta de compatibilidad como Babel podrías colocar el valor esnext que básicamente elimina todos los tipos de metadatos y pasa el resto de código Javascript sin tocarlo.
{
"compilerOptions": {
"target": "esnext"
}
}outDir
Esta opción le dice a typescript en donde colocar el código JavaScript transpilado. Si no se especifica un valor se tomará por defecto el directorio actual.
{
"compilerOptions": {
"outDir": "dist"
}
}strict
Esta opción permite activar el modo estricto en typescript.
{
"compilerOptions": {
"strict": true
}
}
A veces tener strict activado suele ser un dolor de cabeza ya que es el modo más restrictivo de TypeScript. Es por esto que esta opción es más un conjunto de opciones, así que podemos optar por desactivarlo y activar otras restricciones individuales como noImplicitAny o strictNullChecks. Puedes ver un poco más a fondo esta opción en Compilación de Programas en Typescript.
Transpilación
Una vez realizadas estas configuraciónes es hora de probar que todo ha quedado bien. Para esto, vamos a crear un archivo llamado User.ts con el siguiente contenido:
class User
{
constructor(name)
{
this.name = name
}
}
En otra ventana de la terminal vas a ejecutar el siguiente comando en el directorio del proyecto o en donde has creado el archivo.
tsc -wEsto creada un modo live que a medida que vas realizando cambios en el código verás la transpilación con la descripción del archivo. Si todo ha salido bien obtendrás una salida similar a la siguiente:
[8:31:56 PM] File change detected. Starting incremental compilation...
User.ts:5:14 - error TS2339: Property 'name' does not exist on type 'User'.
5 this.name = name
~~~~
[8:31:56 PM] Found 1 error. Watching for file changes.Lo cual indica que aunque la clase es válida en JavaScript, necesitamos definir la propiedad name en typescript.