Guía de supervivencia de TypeScript: Consejos y técnicas que te salvarán la vida

Rate this content
Bookmark

Vamos a repasar tu kit de supervivencia para la jungla de TS! En esta charla, obtendrás la guía completa de TS, desde consejos simples hasta técnicas complejas que te ayudarán a aprovechar al máximo TypeScript no solo en esos grandes proyectos de producción, sino también en tu pequeña idea de hobby. Exploraremos validaciones, configuración, tipos y mucho más.

7 min
21 Sep, 2023

AI Generated Video Summary

Hola, soy Lucas, un ingeniero de software en Klarna en Suecia. Compartiré mis mejores consejos y trucos con TypeScript. Una herramienta útil es tsconfig-basis, que elimina la necesidad de copiar y pegar el mismo archivo tsconfig. Los tipos renderizados en TypeScript son poderosos para manejar diferentes tipos de cadenas, y los type guards y las assertion functions los hacen aún más útiles. Las enumeraciones en TypeScript pueden ser números, cadenas o constantes, cada una con sus propias ventajas y limitaciones. Por último, hay nuevas características en PS 5.2 como 'using' para la eliminación de recursos y 'unknown' para la protección de datos, así como un tipo de utilidad de conversión de mayúsculas y minúsculas para interfaces.

1. Introducción a TypeScript y tsconfig-basis

Short description:

Hola, soy Lucas. Soy un ingeniero de software aquí en Klarna en Suecia. Presentaré los mejores consejos y trucos que he aprendido con TypeScript en estos últimos años contigo. Lo primero, en los últimos años, perdí la cuenta de cuántas veces copié y pegué el mismo tsconfig una y otra vez, hasta que descubrí que podía usar tsconfig-basis. Es un repositorio oficial que tiene varios tsconfig-basis para que los extiendas de forma natural.

Hola, soy Lucas. Soy un ingeniero de software aquí en Klarna en Suecia. Soy originario de Brasil y he estado programando durante los últimos 11 años y compartiendo lo que he aprendido. Así que si te gusta esta charla y tienes algún comentario, por favor contáctame en mis redes sociales, solo pon el nombre de la red en elsantos.dev y llegarás allí, o simplemente elsantos.dev también funcionará. Pero yendo al grano, presentaré los mejores consejos y trucos que he aprendido con TypeScript en estos últimos años contigo. Y todo esto en 10 minutos o menos. Así que, vamos. Lo primero, en los últimos años, perdí la cuenta de cuántas veces copié y pegué el mismo tsconfig una y otra vez, hasta que descubrí que podía usar tsconfig-basis. Es un repositorio oficial que tiene varios tsconfig-basis para que los extiendas de forma natural. Y tsconfig lo admite a través de la propiedad extends. Como puedes ver, podemos usar extends y pasar el nombre del repositorio siguiendo la configuración que queremos extender. Y si no te gusta ninguna de esas configuraciones, simplemente puedes sobrescribirla escribiéndola nuevamente en la parte inferior. Pero esto no solo es para la extensión de tsconfig-basis. Entonces, en realidad puedes extender si tienes archivos locales, si quieres extender, como en una configuración de mono-repo donde necesitas extender el archivo base. Entonces, lo que puedes hacer es simplemente poner esa ruta en ese archivo, y es mágico. Así que nunca tienes que copiar

2. Rendered Types and Type Guards

Short description:

Los tipos renderizados en TypeScript son poderosos para manejar diferentes tipos de cadenas. Te permiten marcar una cadena como un tipo específico, como un ID, evitando errores como pasar un nombre a un ID. Sin embargo, los tipos renderizados requieren una conversión de tipo explícita, lo cual puede ser engorroso. Para superar esto, tenemos los type guards y las assertion functions. Los type guards nos permiten reducir el tipo sin una conversión explícita, mientras que las assertion functions lanzan errores si el tipo es incorrecto. Esto hace que los tipos renderizados sean más útiles y permiten guards más livianos.

No tener que copiar un tsconfig nuevamente. Para el segundo consejo, quería hablar sobre algo que me llevó algún tiempo entender lo poderoso que realmente era. Estoy hablando de los tipos renderizados. Normalmente, no se ven muchos de estos en el código de TS. Eso se debe a que tienen un caso de uso muy específico. Y son enormemente útiles cuando tienes diferentes tipos de cadenas, pero aún así son cadenas, como un uid. Puedes renderizar el tipo para marcarlo como un ID, aunque sea una cadena. Pero es una cadena de un cierto tipo, lo que hace imposible pasar un nombre a un ID por error, por ejemplo. O incluso pasar el tipo incorrecto de ID a alguna función. Sin embargo, los tipos renderizados solo se pueden convertir mediante una conversión de tipo explícita, lo cual es malo, por lo que podemos crear una función para convertir explícitamente un tipo en otro. Pero aún así, hay una mejor manera de hacer esto. Y te presento el tercer consejo de supervivencia, los type guards y las assertion functions. Cuando usas tipos renderizados, generalmente los siguen uno de estos dos. Porque los guards y las assertion nos permiten reducir el tipo sin tener que convertirlo explícitamente. Puedo convertir explícitamente cualquier cosa en un ID y funcionará, básicamente. El truco aquí es básicamente agregar una nueva función que protegerá el tipo, y esta función está diciendo que un tipo es de otro tipo como una anotación de retorno. De esta manera, podemos hacer una comprobación if y verificar que el ID sea un id con los rejects. Pero esto no es solo agregar ruido, este if ahí. No me gusta. Es por eso que tenemos las assertion functions. Se declaran diciendo que la función afirma que un parámetro es de un tipo dado. Entonces, la diferencia principal entre una y otra es que las assertion functions no devuelven nada, lanzan errores, mientras que los guards devuelven booleanos. De esta manera, los tipos renderizados pueden ser más útiles.

3. Enums: Number, String, and Const

Short description:

Para el siguiente consejo, Enums. Los Enums son una de las pocas estructuras en TypeScript que producen código JS. Puedes usar Enums numéricos, Enums de cadena o Enums constantes. Los Enums numéricos aseguran que coincida con un número o su tipo, mientras que los Enums de cadena son más fáciles de leer pero requieren conversión para asignación. Los Enums constantes reemplazan las llamadas con valores en el código final, pero no estandarizan las cosas y no se pueden acceder en tiempo de ejecución.

y también puedes crear guards que son livianos. Para el siguiente consejo, Enums. El gran elefante en la habitación. Mientras a algunos no les gustan los Enums, a mí particularmente me gustan. Pero necesitas conocerlos. Así que ese es el consejo. Conoce los Enums. Entonces, empecemos con el básico Enum numérico. Los Enums son una de las pocas estructuras en TypeScript que producen código JS. Parece extraño, pero se asegura de que siempre puedas hacer coincidir un número o su tipo. El problema es que puedes usar ambos y eso medio que derrota el propósito de enumerar cosas, ¿verdad? Entonces, lo que podemos hacer es usar los Enums de cadena que son más fáciles de leer, pero no podemos asignar directamente el valor que contiene a la variable que tiene su tipo. Entonces, necesitas convertir, por ejemplo, una entrada de usuario en un nuevo valor si necesitas asignar ambos. En mi opinión, vale la pena porque estandarizas el código, sin embargo, los tipos de enum también pueden ser un muy buen sustituto para esto. Y el último es un enum constante. No produce ninguna salida porque reemplazará sus llamadas con sus valores en el transpiled.js, como magia. Entonces, en este ejemplo, todos los valores del enum se reemplazarán con sus enums en el código final. No producirá ninguna salida pero tampoco estandarizará las cosas, por lo que todavía aparecerán números mágicos de la nada. Además, los enums constantes no existen en runtime, por lo que no puedes acceder a sus claves o valores de la misma manera que puedes hacerlo con otros. Así que son

4. Disposición de recursos, tipo desconocido, conversión de casos

Short description:

En PS 5.2, una nueva palabra clave llamada 'using' permite un control explícito sobre la disposición de recursos y el ciclo de memoria. La implementación de 'unknown' protege el uso de datos. Introducción del tipo de utilidad de conversión de casos para interfaces de snake case y camel case.

se expanden en sus valores subyacentes y eso es todo. No hay vuelta atrás. Para la próxima revolución, algo nuevo, algo bastante nuevo. En PS 5.2, hay una nueva palabra clave, que también llegará pronto a JS, que te permite controlar explícitamente la disposición de recursos y el ciclo de memoria. Es la palabra clave 'using'. Todo comienza con el símbolo dispose o el dispose asíncrono que colocas en una clase de objeto o cualquier cosa que acepte un método de ese tipo. Este método se encargará de disponer del recurso y luego solo necesitas declarar una variable con 'using' asíncrono o simplemente 'using' dependiendo de tu objeto, si es un objeto sincrónico o no. Y este es un consejo muy útil que te puede salvar la vida porque puedes abstraer mucha de la complejidad del ciclo de vida del objeto del uso de ese objeto. Para uno de nuestros últimos tips quiero presentarte el mundo de lo desconocido y cómo podemos salvar muchas vidas. En Klarna, tenemos muchos lugares donde lidiamos con sistemas heredados, especialmente aquellos que se portaron a TypeScript y en todos los lugares donde las personas no sabían qué tipo usar, no hay ninguno y eso es muy malo. Malo porque estamos deshabilitando literalmente TypeScript para esos tipos y no estamos inferiendo nada. No hay tipos, todos sabemos lo malo que es 'any' en general, pero hay una solución. Esta solución es 'unknown'. Comenzamos a implementar 'unknown' y la trampa es que todo se puede asignar a 'unknown', pero 'unknown' no se puede asignar a nada. De esta manera protegemos los data donde realmente se utiliza. Y un buen ejemplo de esto sería el tipado de una función de análisis JSON para que devuelva 'unknown' en lugar de 'any'. Así podemos ver que en el objeto antiguo incluso podemos usar claves que no existen y esto definitivamente fallaría en tiempo de ejecución. Además, 'unknown' es una muy buena manera de migrar de JavaScript a TypeScript porque tan pronto como creas uno, ya conoces todo el camino que ha tomado el recurso y quién lo está usando debido al error que va a crear. Y por último, quiero presentar la utilidad de conversión de casos utilizando mayúsculas, capitalizadas o minúsculas. El contexto de esto es que en Klarna tenemos muchos otros servicios que utilizan snake case y otros servicios que utilizan camel case. Debido a eso, necesitábamos convertir las llamadas y respuestas de la API al formato específico y esto llevó a la creación de estas interfaces duplicadas donde una era en snake case y la otra en camel case. Así que no necesitas hacer esto, obviamente hay una forma demasiado complicada de hacerlo genérico como lo hice aquí, pero en este ejemplo estoy creando un tipo que toma una cadena, la divide en snake case utilizando un tipo recursivo y la convierte en camel case. Y luego podemos usar un tipo de mapeo para mapear todas las claves de un objeto a camel case y ahora no necesitamos duplicar nuestras interfaces más. Y eso fue todo, básicamente. 10 tips en 10 minutos. Así que muchas gracias por estar aquí y por escuchar esto, y si tienes alguna pregunta, únete a mí en mis redes sociales y en los sitios web que se encuentran aquí abajo. ¡Hasta pronto!

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Vue.js London 2023Vue.js London 2023
30 min
Stop Writing Your Routes
The more you keep working on an application, the more complicated its routing becomes, and the easier it is to make a mistake. ""Was the route named users or was it user?"", ""Did it have an id param or was it userId?"". If only TypeScript could tell you what are the possible names and params. If only you didn't have to write a single route anymore and let a plugin do it for you. In this talk we will go through what it took to bring automatically typed routes for Vue Router.
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
I'll dive into the internals of Nuxt to describe how we've built a TypeScript-first framework that is deeply integrated with the user's IDE and type checking setup to offer end-to-end full-stack type safety, hints for layouts, middleware and more, typed runtime configuration options and even typed routing. Plus, I'll highlight what I'm most excited about doing in the days to come and how TypeScript makes that possible not just for us but for any library author.
React Day Berlin 2023React Day Berlin 2023
21 min
React's Most Useful Types
We don't think of React as shipping its own types. But React's types are a core part of the framework - overseen by the React team, and co-ordinated with React's major releases.In this live coding talk, we'll look at all the types you've been missing out on. How do you get the props type from a component? How do you know what ref a component takes? Should you use React.FC? And what's the deal with JSX.Element?You'll walk away with a bunch of exciting ideas to take to your React applications, and hopefully a new appreciation for the wonders of React and TypeScript working together.
React Advanced Conference 2021React Advanced Conference 2021
6 min
Full-stack & typesafe React (+Native) apps with tRPC.io
Why are we devs so obsessed with decoupling things that are coupled nature? tRPC is a library that replaces the need for GraphQL or REST for internal APIs. When using it, you simply write backend functions whose input and output shapes are instantly inferred in your frontend without any code generation; making writing API schemas a thing of the past. It's lightweight, not tied to React, HTTP-cacheable, and can be incrementally adopted. In this talk, I'll give a glimpse of the DX you can get from tRPC and how (and why) to get started.
TypeScript Congress 2022TypeScript Congress 2022
10 min
How to properly handle URL slug changes in Next.js
If you're using a headless CMS for storing content, you also work with URL slugs, the last parts of any URL. The problem is, content editors are able to freely change the slugs which can cause 404 errors, lost page ranks, broken links, and in the end confused visitors on your site. In this talk, I will present a solution for keeping a history of URL slugs in the CMS and explain how to implement a proper redirect mechanism (using TypeScript!) for dynamically generated pages on a Next.js website.

Add to the talk notes: https://github.com/ondrabus/kontent-boilerplate-next-js-ts-congress-2022 

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2022React Advanced Conference 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Featured Workshop
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
TypeScript Congress 2022TypeScript Congress 2022
116 min
Advanced TypeScript types for fun and reliability
Workshop
If you're looking to get the most out of TypeScript, this workshop is for you! In this interactive workshop, we will explore the use of advanced types to improve the safety and predictability of your TypeScript code. You will learn when to use types like unknown or never. We will explore the use of type predicates, guards and exhaustive checking to make your TypeScript code more reliable both at compile and run-time. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Are you familiar with the basics of TypeScript and want to dive deeper? Then please join me with your laptop in this advanced and interactive workshop to learn all these topics and more.
You can find the slides, with links, here: http://theproblemsolver.nl/docs/ts-advanced-workshop.pdf
And the repository we will be using is here: https://github.com/mauricedb/ts-advanced
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
TestJS Summit 2023TestJS Summit 2023
78 min
Mastering Node.js Test Runner
Workshop
Node.js test runner is modern, fast, and doesn't require additional libraries, but understanding and using it well can be tricky. You will learn how to use Node.js test runner to its full potential. We'll show you how it compares to other tools, how to set it up, and how to run your tests effectively. During the workshop, we'll do exercises to help you get comfortable with filtering, using native assertions, running tests in parallel, using CLI, and more. We'll also talk about working with TypeScript, making custom reports, and code coverage.
Node Congress 2021Node Congress 2021
245 min
Building Serverless Applications on AWS with TypeScript
Workshop
This workshop teaches you the basics of serverless application development with TypeScript. We'll start with a simple Lambda function, set up the project and the infrastructure-as-a-code (AWS CDK), and learn how to organize, test, and debug a more complex serverless application.
Table of contents:        - How to set up a serverless project with TypeScript and CDK        - How to write a testable Lambda function with hexagonal architecture        - How to connect a function to a DynamoDB table        - How to create a serverless API        - How to debug and test a serverless function        - How to organize and grow a serverless application


Materials referred to in the workshop:
https://excalidraw.com/#room=57b84e0df9bdb7ea5675,HYgVepLIpfxrK4EQNclQ9w
DynamoDB blog Alex DeBrie: https://www.dynamodbguide.com/
Excellent book for the DynamoDB: https://www.dynamodbbook.com/
https://slobodan.me/workshops/nodecongress/prerequisites.html