En este art\u00edculo, explorar\u00e1s los cambios introducidos en TypeScript 5.0, proporcionando una visi\u00f3n en profundidad de sus nuevas caracter\u00edsticas y capacidades.<\/p>\n
Primeros Pasos con TypeScript 5.0<\/h2>\n
TypeScript es un compilador oficial que puedes instalar en tu proyecto utilizando npm<\/a>. Si quieres empezar a utilizar TypeScript 5.0 en tu proyecto, puedes ejecutar el siguiente comando en el directorio de tu proyecto:<\/p>\n Esto instalar\u00e1 el compilador en el directorio node_modules<\/strong>, que ahora puedes ejecutar con el comando Tambi\u00e9n puedes encontrar instrucciones sobre el uso de la nueva versi\u00f3n de TypeScript en Visual Studio Code en esta documentaci\u00f3n<\/a>.<\/p>\n\n En este art\u00edculo, vamos a explorar 5 actualizaciones importantes introducidas en TypeScript. Estas caracter\u00edsticas incluyen:<\/p>\n Los decoradores han existido en TypeScript durante un tiempo bajo una bandera experimental, pero la nueva versi\u00f3n los pone al d\u00eda con la propuesta ECMAScript, que se encuentra ahora en la fase 3<\/a>, lo que significa que est\u00e1 en una etapa en la que se a\u00f1ade a TypeScript.<\/p>\n Los decoradores son una forma de personalizar el comportamiento de las clases y sus miembros de forma reutilizable. Por ejemplo, si tienes una clase que tiene dos m\u00e9todos, En casos de uso en el mundo real, esta clase deber\u00eda tener m\u00e9todos m\u00e1s complicados que manejen alguna l\u00f3gica as\u00edncrona y tengan efectos paralelos, e.t.c., donde deber\u00edas lanzar algunas llamadas a Se trata de un patr\u00f3n que se repite con frecuencia y ser\u00eda conveniente disponer de una soluci\u00f3n aplicable a todos los m\u00e9todos.<\/p>\n Aqu\u00ed es donde entran en juego los decoradores. Podemos definir una funci\u00f3n llamada En el c\u00f3digo anterior, el Utilizando decoradores, puedes aplicar el Esto devolver\u00e1 lo siguiente:<\/p>\n Al definir la funci\u00f3n decoradora ( Cuando ejecutes tu c\u00f3digo, la salida llevar\u00e1 ahora el nombre de cada m\u00e9todo decorado con el decorador Hay m\u00e1s cosas que puedes hacer con los decoradores. No dudes en consultar el pull request original<\/a> para obtener m\u00e1s informaci\u00f3n sobre c\u00f3mo utilizar los decoradores en TypeScript.<\/p>\n Este es otro gran lanzamiento que te proporciona una nueva herramienta con gen\u00e9ricos para mejorar la inferencia que obtienes cuando llamas a funciones. Por defecto, cuando declaras valores con Hasta ahora, para conseguir la inferencia deseada, ten\u00edas que utilizar la aserci\u00f3n const a\u00f1adiendo \u00abas const\u00bb:<\/p>\n Cuando llamas a funciones, es similar. En el c\u00f3digo siguiente, el tipo inferido de los pa\u00edses<\/strong> es Puede que desees un tipo m\u00e1s espec\u00edfico, para lo cual una forma de solucionarlo hasta ahora ha sido a\u00f1adir la aserci\u00f3n Esto puede ser dif\u00edcil de recordar e implementar. Sin embargo, TypeScript 5.0 introduce una nueva caracter\u00edstica por la que puedes a\u00f1adir un modificador const a una declaraci\u00f3n de par\u00e1metro de tipo, que aplicar\u00e1 autom\u00e1ticamente una inferencia de tipo const por defecto.<\/p>\n El uso de par\u00e1metros de tipo Puedes consultar el pull request original<\/a> para obtener m\u00e1s informaci\u00f3n sobre c\u00f3mo funciona el par\u00e1metro de tipo const en TypeScript.<\/p>\n Los enums en TypeScript son una potente construcci\u00f3n que permite a los desarrolladores definir un conjunto de constantes con nombre. En TypeScript 5.0, se han introducido mejoras en los enums para hacerlos a\u00fan m\u00e1s flexibles y \u00fatiles.<\/p>\n Por ejemplo, si pasas el siguiente enum a una funci\u00f3n:<\/p>\n Antes de la introducci\u00f3n de TypeScript 5.0, pod\u00edas pasar un n\u00famero de nivel incorrecto, y no arrojar\u00eda ning\u00fan error. Pero con la introducci\u00f3n de TypeScript 5.0, se producir\u00e1 inmediatamente un error.<\/p>\n Adem\u00e1s, la nueva versi\u00f3n convierte todos los enums en enums de uni\u00f3n, creando un tipo \u00fanico para cada miembro computado. Esta mejora permite acotar todos los enums y referenciar sus miembros como tipos:<\/p>\n TypeScript 5.0 incluye numerosos cambios significativos en la estructura del c\u00f3digo, las estructuras de datos y las extensiones algor\u00edtmicas. Esto ha ayudado a mejorar toda la experiencia TypeScript, desde la instalaci\u00f3n hasta la ejecuci\u00f3n, haci\u00e9ndola m\u00e1s r\u00e1pida y eficiente.<\/p>\n Por ejemplo, la diferencia entre el tama\u00f1o de los paquetes de TypeScript 5.0 y 4.9 es bastante considerable.<\/p>\n TypeScript se ha migrado recientemente de espacios de nombres a m\u00f3dulos, lo que le permite aprovechar las herramientas de construcci\u00f3n modernas que pueden realizar optimizaciones como la elevaci\u00f3n del \u00e1mbito. Adem\u00e1s, la eliminaci\u00f3n de c\u00f3digo obsoleto ha reducido en 26,4 MB los 63,8 MB del paquete de TypeScript 4.9.<\/p>\n Aqu\u00ed tienes algunas ventajas interesantes en velocidad y tama\u00f1o entre TypeScript 5.0 y 4.9:<\/p>\nnpm install -D typescript<\/code><\/pre>\nnpx tsc<\/code>.<\/p>\n\u00bfQu\u00e9 Novedades trae TypeScript 5.0?<\/h2>\n
Decoradores Modernizados<\/h3>\n
greet<\/code> y getAge<\/code>:<\/p>\nclass Person {\n name: string;\n age: number;\n constructor(name: string, age: number) {\n this.name = name;\n this.age = age;\n }\n\n greet() {\n console.log(`Hello, my name is ${this.name}.`);\n }\n\n getAge() {\n console.log(`I am ${this.age} years old.`);\n }\n}\n\nconst p = new Person('Ron', 30);\np.greet();\np.getAge();<\/code><\/pre>\nconsole.log<\/code> para ayudar a depurar los m\u00e9todos.<\/p>\nclass Person {\n name: string;\n age: number;\n constructor(name: string, age: number) {\n this.name = name;\n this.age = age;\n }\n\n greet() {\n console.log('LOG: Method Execution Starts.');\n console.log(`Hello, my name is ${this.name}.`);\n console.log('LOG: Method Execution Ends.');\n }\n\n getAge() {\n console.log('LOG: Method Execution Starts.');\n console.log(`I am ${this.age} years old.`);\n console.log('Method Execution Ends.');\n }\n}\n\nconst p = new Person('Ron', 30);\np.greet();\np.getAge();<\/code><\/pre>\ndebugMethod<\/code> que aparezca como sigue:<\/p>\nfunction debugMethod(originalMethod: any, context: any) {\n function replacementMethod(this: any, ...args: any[]) {\n console.log('Method Execution Starts.');\n const result = originalMethod.call(this, ...args);\n console.log('Method Execution Ends.');\n return result;\n }\n return replacementMethod;\n}<\/code><\/pre>\ndebugMethod<\/code> toma el m\u00e9todo original (originalMethod<\/code>) y devuelve una funci\u00f3n que hace lo siguiente:<\/p>\n\n
debugMethod<\/code> a tus m\u00e9todos, como se muestra en el c\u00f3digo siguiente:<\/p>\nclass Person {\n name: string;\n age: number;\n constructor(name: string, age: number) {\n this.name = name;\n this.age = age;\n }\n @debugMethod\n greet() {\n console.log(`Hello, my name is ${this.name}.`);\n }\n @debugMethod\n getAge() {\n console.log(`I am ${this.age} years old.`);\n }\n}\nconst p = new Person('Ron', 30);\np.greet();\np.getAge();<\/code><\/pre>\nLOG: Entering method.\nHello, my name is Ron.\nLOG: Exiting method.\nLOG: Entering method.\nI am 30 years old.\nLOG: Exiting method.<\/code><\/pre>\ndebugMethod<\/code>), se pasa un segundo par\u00e1metro llamado context<\/code> (es el objeto contexto \u2014 tiene informaci\u00f3n \u00fatil sobre c\u00f3mo se declar\u00f3 el m\u00e9todo decorado y tambi\u00e9n el nombre del m\u00e9todo). Puedes actualizar tu debugMethod<\/code> para obtener el nombre del m\u00e9todo del objeto context<\/code>:<\/p>\nfunction debugMethod(\n originalMethod: any,\n context: ClassMethodDecoratorContext\n) {\n const methodName = String(context.name);\n function replacementMethod(this: any, ...args: any[]) {\n console.log(`'${methodName}' Execution Starts.`);\n const result = originalMethod.call(this, ...args);\n console.log(`'${methodName}' Execution Ends.`);\n return result;\n }\n return replacementMethod;\n}<\/code><\/pre>\ndebugMethod<\/code>:<\/p>\n'greet' Execution Starts.\nHello, my name is Ron.\n'greet' Execution Ends.\n'getAge' Execution Starts.\nI am 30 years old.\n'getAge' Execution Ends.<\/code><\/pre>\nIntroducci\u00f3n de los Par\u00e1metros de Tipo const<\/h3>\n
const<\/code>, TypeScript infiere el tipo y no sus valores literales:<\/p>\n\/\/ Inferred type: string[]\nconst names = ['John', 'Jake', 'Jack'];<\/code><\/pre>\n\/\/ Inferred type: readonly [\"John\", \"Jake\", \"Jack\"]\nconst names = ['John', 'Jake', 'Jack'] as const;<\/code><\/pre>\nstring[]<\/code>:<\/p>\ntype HasCountries = { countries: readonly string[] };\nfunction getCountriesExactly(arg: T): T['countries'] {\n return arg.countries;\n}\n\n\/\/ Inferred type: string[]\nconst countries = getCountriesExactly({ countries: ['USA', 'Canada', 'India'] });<\/code><\/pre>\nas const<\/code>:<\/p>\n\/\/ Inferred type: readonly [\"USA\", \"Canada\", \"India\"]\nconst names = getNamesExactly({ countries: ['USA', 'Canada', 'India'] } as const);<\/code><\/pre>\ntype HasCountries = { countries: readonly string[] };\nfunction getNamesExactly(arg: T): T['countries'] {\n return arg.countries;\n}\n\n\/\/ Inferred type: readonly [\"USA\", \"Canada\", \"India\"]\nconst names = getNamesExactly({ countries: ['USA', 'Canada', 'India'] });<\/code><\/pre>\nconst<\/code> permite a los desarrolladores expresar la intenci\u00f3n m\u00e1s claramente en su c\u00f3digo. Si se pretende que una variable sea constante y no cambie nunca, utilizar un par\u00e1metro de tipo const<\/code> garantiza que nunca pueda cambiarse accidentalmente.<\/p>\nMejoras en los Enums<\/h3>\n
enum Color {\n Red,\n Green,\n Blue,\n}\n\nfunction getColorName(colorLevel: Color) {\n return colorLevel;\n}\n\nconsole.log(getColorName(1));<\/code><\/pre>\nenum Color {\n Red,\n Purple,\n Orange,\n Green,\n Blue,\n Black,\n White,\n}\n\ntype PrimaryColor = Color.Red | Color.Green | Color.Blue;\n\nfunction isPrimaryColor(c: Color): c is PrimaryColor {\n return c === Color.Red || c === Color.Green || c === Color.Blue;\n}\n\nconsole.log(isPrimaryColor(Color.White)); \/\/ Outputs: false\nconsole.log(isPrimaryColor(Color.Red)); \/\/ Outputs: true<\/code><\/pre>\nMejoras de Rendimiento de TypeScript 5.0<\/h3>\n
![\"Tama\u00f1o](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/pasted-image-0.png\")