Descubra todo sobre las características que presenta esta última versión de TypeScript.

TypeScript, el popular lenguaje de programación de Microsoft, continúa impresionando con su último lanzamiento, TypeScript 5.1. Repleto de nuevas y emocionantes funciones y mejoras, esta versión promete llevar su experiencia de codificación a un nuevo nivel. alturas

Devoluciones de funciones simplificadas y tipos de acceso

En JavaScript, cuando creas una función y ejecutarlo sin encontrar una declaración de devolución, automáticamente devuelve el valor indefinido.

TypeScript 5.1 ha introducido una nueva función que permite que las funciones que devuelven undefined omitan la declaración de retorno por completo. Esta mejora mejora la legibilidad y la concisión del código.

funciónmensaje de registro(mensaje: cadena): indefinido{
consola.log (mensaje);
// No se necesita declaración de retorno aquí
}

Este ejemplo utiliza la función mensaje de registro para mostrar un mensaje en la consola. Sin embargo, la función no devuelve explícitamente ningún valor.

instagram viewer

TypeScript 5.1 presenta una nueva función que permite el uso de tipos no relacionados para getters y setters, siempre que proporcione anotaciones de tipo explícitas.

Esta mejora demuestra ser muy ventajosa en situaciones en las que necesita aplicar distintos tipos para acceder y modificar una propiedad.

clase Usuario {
privado _nombre: cadena | nulo = nulo;

colocar nombre (nuevoNombre: cadena) {
este._nombre = nuevoNombre;
}

conseguir nombre(): cadena {
devolvereste._¿¿nombre?? 'Desconocido';
}
}

En este ejemplo, la clase Usuario tiene un privado _nombre propiedad que puede ser una cadena o nulo. El nombre setter toma una cuerda nuevo nombre y lo asigna a _nombre. El captador de nombres devuelve el valor de _nombre si no es nulo, o Desconocido si esto es.

Esto le permite hacer cumplir que la propiedad de nombre solo se puede establecer con una cadena, pero al obtener la propiedad de nombre, podría ser una cadena o Desconocido si aún no se ha configurado.

Esta función permite definiciones de tipo más flexibles y expresivas, como se muestra en el ejemplo a continuación.

interfaz CSSStyleRule {
// Siempre se lee como `CSSStyleDeclaration`
conseguir estilo(): CSSStyleDeclaration;

// Solo se puede escribir una `cadena` aquí.
colocar estilo (nuevo valor: cadena);
}

En el ejemplo anterior, la propiedad de estilo tiene un getter que devuelve una CSSStyleDeclaration y un setter que acepta una cadena. Estos tipos no están relacionados, pero TypeScript 5.1 permite este tipo de definición de tipos.

Mejoras JSX

TypeScript 5.1 presenta varias mejoras para JSX. Ahora permite la verificación de tipos desacoplada entre elementos JSX y tipos de etiquetas JSX, que se pueden útil para bibliotecas como redux que permiten que los componentes devuelvan más que solo elementos JSX.

importar * como Reaccionar de"reaccionar";

asíncronofunciónComponente asíncrono() {
devolver

Cargado</div>;
}

// Esto ahora está permitido:
dejar elemento = ;

En este ejemplo, el Componente asíncrono La función es una función asíncrona que devuelve un elemento JSX. TypeScript 5.1 le permite usar este tipo de función como un componente JSX, lo que no era posible en versiones anteriores.

TypeScript 5.1 también presenta compatibilidad con la nueva transformación JSX introducida en React 17. Esto le permite usar JSX sin importar React.

// Antes
importar Reaccionar de"reaccionar";

funciónComponente() {
devolver

¡Hola, mundo!</h1>;
}

// Después
funciónComponente() {
devolver

¡Hola, mundo!</h1>;
}

En el ejemplo anterior, la función Component devuelve un elemento JSX. En TypeScript 5.1 y React 17, ya no necesita importar React para usar JSX.

Aumentos de rendimiento y cambios significativos en TypeScript 5.1

TypeScript 5.1 presenta varias optimizaciones para mejorar el rendimiento, incluidas las optimizaciones de velocidad, memoria y tamaño del paquete, evitando la creación de instancias de tipos innecesarias, verificaciones de casos negativos para literales de unión y llamadas reducidas al escáner para JSDoc analizando

Este es un ejemplo de cómo evitar la creación de instancias de tipos innecesarias dentro de los tipos de objetos que se sabe que no contienen referencias a parámetros de tipos externos y comprobaciones más rápidas de los literales de unión.

tipo Unión = 'a' | 'b' | 'C';

funcióncontrolar(valor: Unión) {
// ...
}

En este ejemplo, TypeScript 5.1 puede verificar rápidamente si un valor es parte del tipo Unión sin tener que verificar cada tipo en la unión.

Aquí hay otro ejemplo:

tipo Punto = {x: número, y: número };

funcióntraducir(punto: Punto, dx: número, dy: número): Punto{
devolver { x: punto.x + dx, y: punto.y + dy };
}

dejar p: Punto = { x: 1, y: 2 };
p = traducir (p, 1, 1);

En este ejemplo, el tipo Punto es un tipo de objeto que no contiene ningún parámetro de tipo. Cuando llama a la función de traducción, TypeScript 5.1 puede evitar la creación de instancias de tipos innecesarias, lo que puede acelerar significativamente la verificación de tipos.

Adoptando TypeScript 5.1

TypeScript 5.1 presenta una gama de potentes funciones y optimizaciones que revolucionan el desarrollo de JavaScript. Desde la función simplificada vuelve a las mejoras de JSX y aumenta el rendimiento, TypeScript 5.1 le permite escribir código más limpio y expresivo al mismo tiempo que mejora la verificación de tipos y el rendimiento general.

Al adoptar TypeScript 5.1, puede desbloquear nuevas posibilidades y elevar sus proyectos de JavaScript a nuevos niveles de eficiencia e innovación. Deje que TypeScript 5.1 sea su puerta de entrada a una experiencia de desarrollo de JavaScript más avanzada y optimizada.