Instalar y configurar TypeScript

Author
By Darío Rivera
Posted on 2022-08-28 in 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 typescript

Una vez instalado podrás ver la versión instalada con el siguiente comando:

server@user$ tsc --version
Version 4.8.2

Configuración

Para configurar typescript debe crearse en la carpeta root del proyecto un archivo llamado tsconfig.json con el siguiente scaffolding:

{
    "compilerOptions": {
        ...
    }
}

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. Generalmente se utiliza el valor de versión cuando no existe otra herramienta de compatibilidad en el proyecto. 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.

{
    "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 strictNullChecksPuedes 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 -w

Esto 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.


Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.