🏯 🦉 🍺 Usar TypeScript en JavaScript sin escribir TypeScript ✅ 🚕 👁️

Soy un gran admirador de TypeScript. Siempre que sea posible, trato de usar este lenguaje en mis proyectos. TypeScript proporciona al desarrollador informes de errores y verificación de tipos en código JavaScript y TypeScript. Además, cualquiera que escriba TypeScript puede usar las funciones convenientes para completar el código, puede realizar una refactorización de manera rápida y confiable. TypeScript es la primera línea de defensa contra errores en el código. Otro punto fuerte de este lenguaje es que le permite utilizar las últimas funciones de JavaScript al escribir programas. Al mismo tiempo, lo que se obtiene al convertir el código TypeScript a JavaScript será compatible con todos los navegadores. Es muy bonito.

Es cierto que no todos los proyectos front-end incluyen TypeScript. ¿Qué pasaría si pudiera usar las capacidades de TypeScript, pero no traduzca todo el proyecto (y todo el equipo) en él y no agregue una nueva herramienta a la tubería de ensamblaje del proyecto? Esto es posible gracias a VS Code y JSDoc.

Configurar el ambiente de trabajo

▍ Opción número 1. Configuración del código VS (Validación global)

La primera forma de usar TypeScript (TS) en proyectos escritos en JavaScript simple (JS) es usar TS para validar todos los archivos JS. Esto se hace mediante la inclusión de un parámetro global VS Code. Este parámetro se puede habilitar en la configuración del usuario o del espacio de trabajo:

"javascript.implicitProjectConfig.checkJs": true

Si es de los que prefiere usar la interfaz gráfica, puede habilitarla como se muestra a continuación.

Habilitación de Validación de TypeScript JS

▍Opción número 2. Uso del archivo jsconfig.json (Validación global)

Otra opción para habilitar la validación de código JS global usando TS es usar un archivo jsconfig.json. Si existe dicho archivo, la configuración especificada en él anulará la configuración especificada en el Código VS.

{
  "compilerOptions": {
    "checkJs": true
  }
}

▍ Opción número 3. Habilitar validación para archivos individuales

Una tercera forma de usar TypeScript para controlar el código JS es habilitar la verificación a nivel de archivo individual. Consiste en agregar el comentario correspondiente al comienzo del archivo:

// @ts-check
let itsAsEasyAs = 'abc';
itsAsEasyAs = 123; // Error: Type '123' is not assignable to type 'string'

Con la misma idea, puede desactivar la comprobación de TS para un solo archivo JS. Esto se hace si la comprobación de TS está habilitada globalmente utilizando los métodos descritos anteriormente. Aquí también se usa un comentario especial:

// @ts-nocheck
let easy = 'abc';
easy = 123; //

Y si desea que TypeScript ignore solo una parte del archivo, puede hacer esto:

let easy = 'abc';
// @ts-ignore
easy = 123; //

Escribir código usando JSDoc

Acabamos de hablar sobre cómo habilitar la comprobación de TS a nivel de archivo. Esto proporciona capacidades básicas de verificación de tipos. Pueden ampliarse describiendo tipos utilizando comentarios en formato JSDoc.

▍Tipificación de funciones

Puede comenzar a escribir código usando JSDoc con una descripción de lo que las funciones aceptan como entrada:

/**
 * @param {number} shippingVal
 */
updateShipping(shippingVal) {
    ...
}

Después de eso, el editor podrá dar pistas por tipo.

Sugerencia sobre el tipo de valor aceptado por la función

Este método es muy adecuado para tipos simples, pero ¿qué sucede si el desarrollador necesita describir sus propios tipos? Esto se puede hacer usando la etiqueta@typedef. Recomiendo poner descripciones de tipo al comienzo del archivo. Esto facilitará la detección de tales descripciones en el curso del trabajo:

/**
* @typedef {Object} CreditNoteTaxResponseViewModel
* @property {number} feeAmount
* @property {number} inclGst
* @property {number} subTotal
* @property {number} total
*
* @typedef {Object} ApiResponse
* @property {string} status
* @property {string} message
* @property {CreditNoteTaxResponseViewModel} response
*/

Dichas descripciones se pueden usar cuando sea necesario:

/**
                * @param {CreditNoteTaxRequestViewModel} req
                * @returns {Promise<ApiResponse>}
                */
                createCreditNoteTaxApiCall(req) {
        ...
                }

Otro caso de uso para esta técnica es mover declaraciones de tipo a archivos especiales. Digamos que tal archivo puede ser llamado main.d.ts.

export interface ICreditNoteTaxRequestViewModel{
    orderID: number;
    shippingCredit: number;
    lines: IICreditNoteTaxLineViewModel[]
}

export interface ICreditNoteTaxLineViewModel{
    originalOrderLineID:number;
    creditQuantity: number;
}

export interface ICreditNoteTaxResponseViewModel{
    feeAmount: number;
    inclGst: number;
    subTotal: number;
    total: number;
}

export interface IApiResponse{
    status: string;
    status: message;
    response: ICreditNoteTaxResponseViewModel;
}

Estos tipos se pueden usar en JavaScript:

/**
   * @param {import("./main").ICreditNoteTaxRequestViewModel} req
   * @returns {Promise<import("./main").IApiResponse>}
   */
  function createCreditNoteTaxApiCall(req) {
    ///  
    return;
  }

▍Tipización de código regular

Los ejemplos anteriores resuelven el problema de escribir los valores de entrada y salida de las funciones. Algo similar se puede hacer usando los comentarios integrados de JSDoc.

Escribiendo una variable regular

▍Tipificación de bibliotecas

VS Code tiene un sistema para obtener tipos automáticamente para bibliotecas de terceros. El procedimiento correspondiente se aplica a todos los paquetes descritos en el archivo package.json. Pero, si alguien prefiere establecer esto explícitamente, puede hacer la configuración adecuada en jsconfig.json:

{
  "typeAcquisition": {
    "include": ["jquery"]
  }
}

Después de que el sistema de obtención de tipos procesa la biblioteca, los tipos se pueden usar en JSDoc:

/**
 * @param {JQuery<HTMLElement>} $itemRow
 */
initRow($itemRow) {
    ...
}

Cambiar a TypeScript

Si decide convertir a un proyecto mecanografiado JavaScript, en algunas partes de las que se utiliza mecanografiado, sólo tiene que cambiar su nombre jsconfig.jsona tsconfig.jsone incluir el parámetro en ella allowJs:

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  }
}

Después de eso, puede comenzar a cambiar el nombre de los *.jsarchivos a *.tsarchivos y escribir el código de estos archivos. El proceso de traducir un proyecto a TypeScript puede ocurrir gradualmente.

Resumen

Después de leer este material, puede notar lo fácil que es aprovechar las características de TypeScript en un proyecto de JavaScript. Para hacer esto, solo configure VS Code en consecuencia. El enfoque descrito aquí le permite no realizar ningún cambio en el proceso de ensamblaje del proyecto, no arriesgarse a violar este proceso y no obligar al equipo de desarrollo a cambiar urgentemente a un nuevo idioma.

Si el proyecto JS, que usa solo algunas de las características de TypeScript, se decide transferir completamente a TS, esto también es fácil de hacer. Además, dicha transición se puede llevar a cabo por etapas.

Aquí está el repositorio de GitHub donde puede encontrar los ejemplos de código utilizados en este artículo.

¡Queridos lectores! ¿Qué le parece la idea de la verificación de tipos en el código JS utilizando las características de TypeScript?

Usar TypeScript en JavaScript sin escribir TypeScript