Compilación de programas en TypeScript

Author
Por Darío Rivera
Publicado el en TypeScript

El compilador de typescript como todos los compiladores es altamente personalizable. Algunas de los parámetros que toma por defecto tal vez no satisfagan las intenciones del programador, es por tal motivo, que en este post veremos como personalizar el compilador utilizando algunas opciones importantes.


Para compilar un archivo en typescript, podemos usar el comando tsc seguido del nombre del archivo.

tsc hello.ts

Versión por defecto de ECMAScript

Por defecto TypeScript compila a JavaScript ES3, una versión muy antigua de JavaScript. Puedes usar el parámetro --target para especificar la versión objetivo a la cual deseas compilar el código.

tsc --target es2015 hello.ts

También puedes cambiar la versión objetivo de ECMAScript desde el archivo de configuración tsconfig.json. Puedes ver cómo configurar este archivo en nuestro artículo Instalar y Configurar TypeScript.

Compilación con errores

Puede parecer extraño, pero aún cuando el compilador arroje errores es posible obtener un archivo de salida en javascript. El parámetro --noEmitOnError evita que el output sea generado cuando hay errores en typescript.

Este comportamiento por defecto de TypeScript, permite que puedas pasar fácilmente código legacy de JavaScript que funciona! a TypeScript. Por ejemplo, puedes tener funciones que tenga n parametros y se envíen menos de los requeridos. Esto causaría un error que es avisado por el compilador de TypeScript.

Por ejemplo, el siguiente código arrojará un error en el compilador.

function helloWorld(name: string)
{
    return 'Hello ' + (name || '');
}

helloWorld();

Sin embargo, producirá el siguiente código válido en JavaScript.

function helloWorld(name) {
    return 'Hello ' + (name || '');
}
helloWorld();

Al ejecutar la función helloWorld() sin parámetros se obtendrá el mensaje "Hello ".

tsc --noEmitOnError hello.ts

Modo estricto

El modo estricto en typescript puede activar con el parámetro --strict en consola. Este modo es mucho más estricto que la configuración por defecto y evita cierto tipo de errores que aún con el tipado estricto por defecto de typescript son difíciles de hallar debido a la forma como funciona JavaScript.

tsc --strict hello.ts

Un ejemplo de esto es la función call de JavaScript. Si no estuviera activado el modo estricto no sería posible determinar un error de la función call cuando llama con un parámetro de distinto tipo.

// With strictBindCallApply on
function fn(x: string) {
  return parseInt(x);
}
 
const n1 = fn.call(undefined, "10");
 
const n2 = fn.call(undefined, false);

El modo estricto en realidad es un conjunto de características que pueden ser activadas de manera independiente como por ejemplo noImplicitAny o strictNullChecks.

noImplicitAny

En algunos casos TypeScript inferirá de manera implícita un tipo de dato a any. Lo cual implica que puede ser de cualquier tipo. Con el parámetro --noImplicitAny typescript lanzará un error cuando un tipo se infiera como any de manera implícita. Observa el siguiente ejemplo, el cual lanzaría error ya que el tipo de parámetro de la función no está especificado y se infiere como any.

function fn(s) {
  console.log(s.subtr(3));
}
fn(42);

strictNullChecks

Las referencias nulas han causado miles de dolores de cabeza y costos a lo largo de la historia. Podemos cambiar el comportamiento para verificar referencias nulas con la opción --strictNullChecks. Así, el compilador lanzará un error cuando encuentre una variable declarada pero posiblemente no inicializada. Observa el siguiente código que no arrojaría un error cuando esta opción está desactivada.

declare const loggedInUsername: string;
 
const users = [
  { name: "Oby", age: 12 },
  { name: "Heera", age: 32 },
];
 
const loggedInUser = users.find((u) => u.name === loggedInUsername);
console.log(loggedInUser.age);

Sin embargo, al ejecutar este código con la opción activada obtendríamos el siguiente error:

Uncaught ReferenceError: loggedInUsername is not defined

Ese es el problema de tener referencias nulas en nuestro código.


Acerca de Darío Rivera

Author

Application Architect at Elentra Corp . Quality developer and passionate learner with 10+ years of experience in web technologies. Creator of EasyHttp , an standard way to consume HTTP Clients.

LinkedIn Twitter Instagram

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