Neste artigo, voc\u00ea ir\u00e1 explorar as mudan\u00e7as introduzidas no TypeScript 5.0, fornecendo uma vis\u00e3o detalhada de suas novas caracter\u00edsticas e capacidades.<\/p>\n
Como come\u00e7ar com o TypeScript 5.0<\/h2>\n
O TypeScript \u00e9 um compilador oficial que voc\u00ea pode instalar em seu projeto usando npm<\/a>. Se voc\u00ea quiser come\u00e7ar a usar o TypeScript 5.0 em seu projeto, voc\u00ea pode executar o seguinte comando no diret\u00f3rio do seu projeto:<\/p>\n Isso instalar\u00e1 o compilador no diret\u00f3rio node_modules<\/strong>, que agora voc\u00ea pode rodar usando o comando Voc\u00ea tamb\u00e9m pode encontrar instru\u00e7\u00f5es sobre o uso da nova vers\u00e3o do TypeScript no Visual Studio Code nesta documenta\u00e7\u00e3o<\/a>.<\/p>\n\n Neste artigo, vamos explorar 5 grandes atualiza\u00e7\u00f5es introduzidas no TypeScript. Esses recursos incluem:<\/p>\n Os decoradores j\u00e1 existem no TypeScript h\u00e1 algum tempo sob uma bandeira experimental, mas a nova vers\u00e3o os atualiza com a proposta do ECMAScript, que agora est\u00e1 no est\u00e1gio 3<\/a>, o que significa que est\u00e1 em um est\u00e1gio em que \u00e9 adicionado ao TypeScript.<\/p>\n Os decoradores s\u00e3o uma forma de personalizar o comportamento de classes e seus membros de uma maneira reutiliz\u00e1vel. Por exemplo, se voc\u00ea tem uma classe que possui dois m\u00e9todos, Em casos de uso do mundo real, essa classe deveria ter m\u00e9todos mais complexos que lidam com alguma l\u00f3gica ass\u00edncrona com efeitos colaterais, etc., onde voc\u00ea gostaria de incluir alguns comandos Esse \u00e9 um padr\u00e3o que ocorre frequentemente, e seria conveniente ter uma solu\u00e7\u00e3o para aplicar a cada m\u00e9todo.<\/p>\n \u00c9 aqui que os decoradores entram em cena. Podemos definir uma fun\u00e7\u00e3o chamada No c\u00f3digo acima, o Usando decoradores, voc\u00ea pode aplicar o Isso ir\u00e1 resultar no seguinte:<\/p>\n Ao definir a fun\u00e7\u00e3o do decorador, chamado de ( Quando voc\u00ea executar seu c\u00f3digo, a sa\u00edda agora ter\u00e1 o nome de cada m\u00e9todo decorado com o decorador H\u00e1 mais sobre o que voc\u00ea pode fazer com os decoradores. Sinta-se livre para verificar o pedido pull request<\/a> para mais informa\u00e7\u00f5es sobre como usar decoradores em TypeScript.<\/p>\n Este \u00e9 outro grande lan\u00e7amento que lhe d\u00e1 uma nova ferramenta com gen\u00e9ricos a fim de melhorar a infer\u00eancia que voc\u00ea obt\u00e9m quando voc\u00ea chama fun\u00e7\u00f5es. Por padr\u00e3o, quando voc\u00ea declara valores com At\u00e9 agora, para conseguir a infer\u00eancia desejada, voc\u00ea tinha que usar a afirma\u00e7\u00e3o “as const”:<\/p>\n Ao chamar fun\u00e7\u00f5es, ocorre o mesmo. No c\u00f3digo abaixo, o tipo inferido de countries<\/strong> \u00e9\u00a0 Talvez voc\u00ea deseje um tipo mais espec\u00edfico, e uma forma de corrigir isso anteriormente era adicionar a afirma\u00e7\u00e3o Isso pode ser dif\u00edcil de lembrar e implementar. No entanto, o TypeScript 5.0 introduz um novo recurso onde voc\u00ea pode adicionar um modificador const a uma declara\u00e7\u00e3o de par\u00e2metro de tipo, o que aplicar\u00e1 automaticamente uma infer\u00eancia do const type como padr\u00e3o.<\/p>\n O uso de par\u00e2metros do Voc\u00ea pode verificar o pedido pull request<\/a> para mais informa\u00e7\u00f5es sobre como o par\u00e2metro const type funciona no TypeScript.<\/p>\n Enums no TypeScript s\u00e3o uma constru\u00e7\u00e3o poderosa que permite aos desenvolvedores definir um conjunto de constantes nomeadas. No TypeScript 5.0, foram feitas melhorias nos enums para torn\u00e1-los ainda mais flex\u00edveis e \u00fateis.<\/p>\n Por exemplo, se voc\u00ea tiver o seguinte enum passado para uma fun\u00e7\u00e3o:<\/p>\n Antes da introdu\u00e7\u00e3o do TypeScript 5.0, voc\u00ea poderia passar um n\u00famero de n\u00edvel errado, e isso n\u00e3o geraria nenhum erro. Mas com a introdu\u00e7\u00e3o do TypeScript 5.0, ele imediatamente gerar\u00e1 um erro.<\/p>\n Al\u00e9m disso, a nova vers\u00e3o transforma todos os enums em enums de uni\u00e3o, criando um tipo \u00fanico para cada membro calculado. Esse aprimoramento permite estreitar todos os enums e a refer\u00eancia aos seus membros como tipos:<\/p>\n O TypeScript 5.0 inclui diversas mudan\u00e7as significativas na estrutura de c\u00f3digo, estruturas de dados e extens\u00f5es algor\u00edtmicas. Isso ajudou a melhorar toda a experi\u00eancia do TypeScript, desde a instala\u00e7\u00e3o at\u00e9 a execu\u00e7\u00e3o, tornando mais r\u00e1pido e eficiente.<\/p>\n Por exemplo, a diferen\u00e7a entre o tamanho do pacote do TypeScript 5.0 e 4.9 \u00e9 bastante impressionante.<\/p>\n TypeScript foi recentemente migrado de namespaces para m\u00f3dulos, permitindo que ele aproveite as modernas ferramentas de build que podem realizar otimiza\u00e7\u00f5es como o levantamento de escopo. Al\u00e9m disso, a remo\u00e7\u00e3o de algum c\u00f3digo obsoleto reduziu cerca de 26.4 MB do tamanho de 63.8 MB do TypeScript 4.9.<\/p>\n Aqui est\u00e3o mais alguns ganhos interessantes em velocidade e tamanho entre TypeScript 5.0 e 4.9:<\/p>\nnpm install -D typescript<\/code><\/pre>\nnpx tsc<\/code>.<\/p>\nO que h\u00e1 de novo no TypeScript 5.0?<\/h2>\n
Decoradores modernizados<\/h3>\n
greet<\/code> e 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 depurar os 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 seria assim:<\/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> recebe o m\u00e9todo original (originalMethod<\/code>) e retorna uma fun\u00e7\u00e3o que faz o seguinte:<\/p>\n\n
debugMethod<\/code> aos seus m\u00e9todos como mostrado no c\u00f3digo abaixo:<\/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>), um segundo par\u00e2metro nomeado context<\/code> \u00e9 inclu\u00eddo. Esse objeto de contexto cont\u00e9m informa\u00e7\u00f5es valiosas, como a forma como o m\u00e9todo decorado foi criado e o nome do m\u00e9todo em si. Voc\u00ea pode modificar o seu debugMethod<\/code> para extrair o nome do m\u00e9todo diretamente desse 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>\nIntroduzindo os par\u00e2metros do const type<\/h3>\n
const<\/code>, o TypeScript infere o tipo e n\u00e3o seus valores literais:<\/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> type permite que os desenvolvedores expressem suas inten\u00e7\u00f5es mais claramente em seu c\u00f3digo. Se uma vari\u00e1vel tiver a inten\u00e7\u00e3o de ser constante e nunca mudar, o uso de um par\u00e2metro do const<\/code> type garante que ela nunca poder\u00e1 ser alterada acidentalmente.<\/p>\nMelhorias no 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>\nMelhorias de desempenho do TypeScript 5.0<\/h3>\n
![\"TypeScript](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/pasted-image-0.png\")