Get best of the week

Nuevas características de TypeScript para una usabilidad mejorada

TypeScript, en muchos aspectos, ya no es más como un lenguaje de programación, sino una herramienta poderosa para alinear y documentar código que lo ayuda a escribir mejores programas JavaScript.

Una de las fortalezas más notables de TypeScript es su soporte para algunas de las últimas características descritas en la especificación ECMAScript. Cuando un desarrollador actualiza a una nueva versión de TypeScript, significa que tiene nuevas funciones de JavaScript. Además, el uso de estas características no significa posibles problemas de compatibilidad. TypeScript, además de presentar las últimas funciones de JavaScript, también es notable por el hecho de que los creadores del lenguaje constantemente presentan algo nuevo a la comunidad de programadores de TS, diseñado para aumentar la usabilidad. Esto incluye, por ejemplo, herramientas auxiliares para la refactorización de código, herramientas para renombrar entidades y para encontrar lugares donde se usan en programas.



El material, cuya traducción publicamos hoy, analizará algunas características nuevas e interesantes de TypeScript. Para obtener una lista completa de las innovaciones de TypeScript, eche un vistazo aquí .

Objetos y matrices inmutables


Para hacer que las matrices utilizadas en forma de variables ordinarias y parámetros de función sean inmutables durante la compilación, puede usar tipos auxiliares Readonlyy en TypeScript ReadonlyArray. Sin embargo, su uso puede causar una sensación de heterogeneidad en la anotación de tipo, especialmente al declarar matrices que usan caracteres []después de especificar un tipo. TypeScript 3.4 presenta una nueva forma de etiquetar parámetros que son matrices de solo lectura. Inmediatamente apareció una nueva forma de declarar variables que deberían ser inmutables.

Mejora de la usabilidad con parámetros de solo lectura


Al declarar los parámetros de las funciones con las que necesita trabajar como matrices de solo lectura, ahora puede usar la palabra clave readonly. En el siguiente ejemplo, las firmas de los dos métodos son idénticas:

function foo(s: ReadonlyArray<string>) { /* ... */ }
 
function foo(s: readonly string[]) { /* ... */ }

En ambos casos, cualquier intento de modificar la matriz (por ejemplo, usando su método push) dará como resultado un error. Esta innovación elimina la necesidad de un tipo genérico auxiliar, lo que significa que el código es más fácil de leer. Los tipos de objetos también se pueden etiquetar como entidades de solo lectura, pero aún necesitan un tipo auxiliar Readonly.

Mejora de la usabilidad de variables inmutables utilizando la construcción as const


El tipo de una variable declarada usando una palabra clave constno se puede cambiar. Este concepto existe en JavaScript. También se adopta en TypeScript en aras de organizar un trabajo más estricto con los tipos. Pero cuando se trabaja con tipos de datos de objetos, como objetos o matrices, resulta que tales estructuras no son realmente inmutables. El uso de una palabra clave constsignifica que una instancia específica de un objeto o matriz permanecerá sin cambios cuando se trabaja con una constante, sin embargo, el contenido de este objeto o matriz se puede cambiar fácilmente. Por ejemplo, sin violar las reglas para trabajar con entidades constantes, puede agregar nuevos valores a la matriz utilizando el método push, puede cambiar los valores de las propiedades de los objetos.

Usando ReadonlyyReadonlyArraypuede decirle a TypeScript que el sistema debe tratar a las entidades como si fueran realmente inmutables. Esto significa que cada vez que se realiza un intento en el código para cambiar dicha entidad, se emitirá un mensaje de error.

interface Person { 
  name: string; 
}
 
const person = { 
  name: 'Will' 
} as Readonly<Person>;
person.name = 'Diana'; // !

En TypeScript 3.4, entre otras innovaciones, apareció el concepto de aserción constante (enunciado constante), que proporciona el uso de una construcción as const. Este es un método simplificado para declarar constantes que contienen objetos y matrices inmutables. Dichas declaraciones se crean agregando as constuna constante al final de la declaración. Este método tiene una ventaja adicional, que es que cuando lo usa, no necesita especificar explícitamente el tipo en la declaración as const.

const person = { 
        name: 'Will' 
} as const;
 
person.name = 'Diana'; // !
 
//      as const
const array = [1, 2, 3] as const; 
array.push(4); // !

Tipo de ayuda Omitir


Existen varios tipos de ayuda en TypeScript que facilitan la asignación de los tipos existentes a los nuevos, o la configuración condicional de un tipo basado en otros tipos.

El tipo auxiliar Partialpermite marcar todas las propiedades del objeto como opcional. Antes del lanzamiento de TypeScript 3.5, resultó que constantemente usaba un mecanismo interesante en mis proyectos. Esto es lo mismo que el uso del tipo auxiliar ahora permite lograr Omit. Este tipo, como su nombre lo indica, le permite excluir algo de otros tipos. Omitacepta el tipo y la combinación de claves, y luego devuelve un nuevo tipo del que se excluyen las propiedades descritas por las claves. Atrás han quedado los días en que he tenido que utilizar Pickque Excludepara la aplicación independiente de la funcionalidadOmit.

//     TypeScript 3.5
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
interface A { 
    propA?: string; 
    propB?: string; 
    propC?: string; 
}
 
type B = Omit<A, 'propA' | 'propC'>; 
const b: B = { propA: 'hi' }; // ;

Nuevas funciones de JavaScript compatibles con TypeScript


Cuando las sugerencias para nuevas funciones de JavaScript alcanzan 4 etapas de coordinación, se consideran parte de la próxima versión del lenguaje. Es cierto que esto no significa que tales capacidades puedan usarse inmediatamente en JavaScript, ya que su soporte debe implementarse en entornos apropiados. La aplicación debe tener acceso a tales oportunidades donde sea que se suponga su funcionamiento normal.

El soporte para nuevas características de JavaScript se agrega regularmente al compilador TypeScript. Por lo general, el código que implementa estas características se puede convertir a código JavaScript que sea compatible con todos los navegadores que admitan el objetivo de compilación del proyecto especificado en tsconfig.json.

▍ Verificar nulo e indefinido


Los desarrolladores de JavaScript están familiarizados con el concepto de verdad y falsedad. Cuando la comprobación de la verdad puede ser identificado 6 valores, que son siempre falsas: 0, null, undefined, «», NaN, y, por supuesto, false. La mayoría de las veces, el desarrollador solo necesita averiguar si el valor es verdadero o falso, pero en algunos casos solo necesita averiguar si el valor que se está investigando es un valor real nullo no undefined. Por ejemplo, en el caso si es necesario distinguir entre código 0y undefined:

//  ||     ,  index  0
const getValueOrOne = (x?: number) => index || 1; 
getValueOrOne(0); // 1 <--

Este código funcionará estableciendo xel valor escrito index, en todos los casos, excepto en aquellos en los que el valor indexes igual 0. Para que este código funcione correctamente en cualquier situación, debe reescribirse usando un esquema de prueba más complejo para descubrir el tipo de valor real.

//   ,    
const getValueOrOne = (x?: number) => index !== null && index !== undefined ? : 1; 
getValueOrOne(0); // 0

Ahora el código funciona, pero requiere el uso de controles más complejos. El nuevo operador para verificar el valor nully undefined(parece dos signos de interrogación ??) simplifica dichas comprobaciones al devolver el valor ubicado en su parte izquierda, si no es igual a nully undefined. De lo contrario, devuelve lo que está en su lado derecho.

// !
const getValueOrOne = (x?: number) => index ?? 1; 
getValueOrOne(0); // 0
getValueOrOne(2); // 2
getValueOrOne(); // 1

▍ Secuencias opcionales


Otra nueva característica de JavaScript disponible en TypeScript 3.7 es el operador para organizar secuencias opcionales ( ?.). Conocí a un operador de este tipo en el lenguaje de programación Groovy. Desde entonces, también quería que apareciera en JavaScript. Este operador le permite organizar el acceso a las propiedades incrustadas de los objetos sin la necesidad de verificar constantemente su existencia. Si, al acceder a una propiedad, este operador encuentra un valor undefined, simplemente devolverá este valor sin arrojar un error TypeError.

//    
const value = foo && foo.bar && foo.bar.baz;
 
//    
const value = foo?.bar?.baz;

El operador de secuencia opcional combinado con el operador de verificación de los valores nully undefinedle da al desarrollador aún más posibilidades, permitiendo, por ejemplo, escribir en la variable el valor de alguna propiedad anidada del objeto o, si tal propiedad no existe, algún valor estándar. Así es como se ve:

const value = foo?.bar?.baz ?? 'default value';

▍ Campos de clase privada


TypeScript, desde la aparición de este lenguaje, tiene su propio concepto de campos de clase privada declarados con un modificador de acceso private. Este concepto apareció en TypeScript incluso antes de que las clases se describieran en el estándar ECMAScript. Pero en TypeScript, este concepto se refiere a los mecanismos que funcionan durante la compilación de código. El compilador arrojará un error si se accede al campo privado de la clase no desde los propios métodos de la clase. Ahora en JavaScript, ahora puede declarar propiedades privadas y métodos de una clase. Pero esta característica es semántica y sintácticamente diferente de lo que todavía existía en TypeScript.

Los campos privados en JavaScript no se declaran utilizando un modificador de acceso private. En cambio, se declaran poniendo un símbolo al comienzo de sus nombres #.

class Fan { 
    #on = false; 
    private name = 'fan';
 
    turnOn() { 
        this.#on = true; 
    }
   isTurnedOn() { 
        return this.#on; 
    }
}
 
const fan = new Fan(); 
fan.isTurnedOn(); // false  
fan.turnOn(); 
fan.isTurnedOn(); // true
 
fan.on; //  
fan.#on; // 
fan.name; //   ,    JS

JavaScript ahora admite campos privados, la propuesta de métodos privados se encuentra en la tercera etapa de aprobación. Actualmente, el modificador privatey el carácter #en el nombre del campo no se pueden usar juntos. Ambos enfoques pueden ser útiles durante el desarrollo, y cuál elegir depende del programador. Aquí hay un podcast que analiza la nueva sintaxis para declarar campos privados.

▍Utilizando la palabra clave de espera en el nivel superior del código


Los mecanismos de programación asincrónica amplían enormemente las capacidades de JavaScript y TypeScript. Al principio aparecieron promesas en esta área, luego, un diseño async/awaitque le permite escribir un código asincrónico más limpio.

Uno de los casos donde se usan promesas, y no, async/awaites una llamada de método asincrónico fuera de la función asincrónica. Por ejemplo, en el nivel superior del módulo o código de aplicación. Como solución alternativa en esta situación, puede proponer la creación de una expresión asincrónica inmediatamente llamada Function Expression (IIFE, Inmediately Invocated Function Expression) y ejecutar código asincrónico dentro de dicha expresión.

(async () => { 
    const response = await fetch('https://api.github.com/users/sitepen'); 
    const data = await response.json(); 
    console.log(`Check out the blog at ${data.blog}`); 
})();

TypeScript ahora admite la capacidad de JavaScript para usar palabras clave awaiten el nivel superior del código. Esto significa que esperar puede usarse fuera de las funciones declaradas con la palabra clave async. Esto es muy bueno para escribir código compacto y claro. Es cierto que las expresiones awaiten el nivel superior del código son criticadas por el hecho de que pueden ralentizar la carga de módulos y crear una situación en la que cierto módulo puede ralentizar la carga de toda la aplicación, ya que el sistema tiene que esperar la finalización de la operación asincrónica y luego ejecutar todo el código del módulo.

const response = await fetch('https://api.github.com/users/sitepen'); 
const data = await response.json();
 
export default { ...data };

Entorno de experimentación de TypeScript mejorado


Esto no se puede llamar una nueva característica de TypeScript, pero dado que estamos hablando de TypeScript como una herramienta, TypeScript Playground se puede llamar una herramienta efectiva para verificar rápidamente cualquier construcción de TypeScript y ver el código JavaScript en el que se convierten estas construcciones. La mayoría de los ejemplos aquí se prueban específicamente en TypeScript Playground. Ahora este entorno admite la capacidad de seleccionar una versión específica de TypeScript (incluida la compatibilidad con versiones beta). Incluye varios ejemplos que ayudarán a los principiantes a comenzar con TypeScript.

Resumen


TypeScript es una herramienta que le ayuda a escribir un código JavaScript mejor y más expresivo. Las herramientas auxiliares de TypeScript facilitan la resolución de tareas complejas, como la refactorización y el cambio de nombre de entidades, que son mucho más complicadas en JavaScript ordinario. TypeScript está constantemente introduciendo nuevos mecanismos, como Omity as const. En el lenguaje, se puede observar una mejora continua en el soporte de tipos complejos. TypeScript implementa rápidamente las últimas funciones de JavaScript. Es por eso que muchas personas eligen TypeScript, percibiéndolo como una herramienta, lenguaje y ecosistema.

¡Queridos lectores! ¿Qué nuevas características de TypeScript te parecen más interesantes?

More articles:


All Articles