¿Están equivocados los tipos de módulo?

Rate this content
Bookmark
GithubProject website

¿Alguna vez has instalado una dependencia, la has importado tal como indica el README y te has encontrado inmediatamente con extraños errores de TypeScript sobre importaciones por defecto, el formato de módulo de salida o la interoperabilidad ESM/CommonJS? Cuando todo funciona en tiempo de ejecución pero TypeScript se queja, es posible que te preguntes, ¿es esto un error de TypeScript? O... ¿los tipos están equivocados?


El panorama de los módulos y la publicación de paquetes en JavaScript es complicado. Casi un tercio de los paquetes npm más populares que incluyen tipos tienen algún tipo de problema relacionado con los tipos de módulo que puede causar confusión a los usuarios. Pero las cosas están empezando a mejorar. En esta charla, vamos a:

- explorar cómo llegamos hasta aquí, ¿por qué las cosas son complicadas?
- desarrollar un modelo mental simple y preciso de cómo TypeScript ve los paquetes
- ver cómo la herramienta `arethetypeswrong` puede ayudar a detectar problemas antes de la publicación
- analizar las tendencias en los datos de `arethetypeswrong` para paquetes populares a lo largo del tiempo
- discutir los próximos pasos para mejorar el ecosistema de paquetes con tipos

FAQ

ESM significa Módulo ECMAScript. Es el sistema de módulos que se incorporó a la especificación del lenguaje JavaScript en 2015, reconocible por las palabras clave 'import' y 'export'.

ESM (ECMAScript Module) y CommonJS son sistemas de módulos en JavaScript. ESM utiliza 'import' y 'export', mientras que CommonJS utiliza 'require' y 'module.exports'. CommonJS fue el estándar de la comunidad antes de la introducción de ESM y todavía es compatible con Node.js.

Node.js determina el formato de un archivo de módulo principalmente por la extensión del archivo: '.mjs' siempre es tratado como ESM, '.cjs' siempre como CommonJS, y '.js' depende del campo 'type' en el 'package.json' más cercano, siendo ESM si 'type' es 'module' y CommonJS de lo contrario.

Un archivo .d.ts en TypeScript es un archivo de declaración que contiene toda la información sobre los tipos y la estructura de un archivo JavaScript correspondiente, incluidos los tipos que han sido eliminados del archivo original de TypeScript.

Cuando se mezclan exportaciones predeterminadas en ESM y 'exports.default' en CommonJS, pueden surgir discrepancias, como que TypeScript espera una estructura de módulos mientras que Node.js ejecuta otra, llevando a errores o comportamientos inesperados en el tiempo de ejecución.

'rthetypeswrong' es una herramienta que analiza paquetes NPM para identificar discrepancias entre cómo TypeScript y Node.js resuelven los módulos, ayudando a detectar y resolver problemas de interoperabilidad entre ambos.

Para configurar un proyecto para usar módulos ES en Node.js, se debe agregar el campo 'type: module' en el archivo 'package.json'. Esto indica a Node.js que trate los archivos '.js' como módulos ECMAScript.

Andrew Branch
Andrew Branch
30 min
21 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla analiza las complejidades y terminología del sistema de módulos, las discrepancias entre TypeScript y Node, y cómo solucionar los errores de TypeScript con el paquete Helmet. También explora la resolución de módulos y las discrepancias de tipos, los desafíos con el soporte de TypeScript y Node, y la necesidad de mejoras en paquetes populares.

Available in English: Are the (module) types wrong?

1. Introducción a los módulos y terminología

Short description:

Hola a todos. Mi nombre es Andrew y he estado en el equipo de TypeScript durante los últimos cuatro años. Hoy hablaremos sobre las complejidades del sistema de módulos y la terminología asociada, como ESM y CommonJS. Es importante estar familiarizado con las opciones de resolución de módulos y las diferencias entre Node.16 y Node.Next.

Muy bien. Hola a todos. Y gracias por unirse a mí para hablar sobre módulos. Mi nombre es Andrew. He estado en el equipo de TypeScript durante los últimos cuatro años, y tenemos mucho de qué hablar hoy en poco tiempo, así que eso es suficiente sobre mí. Y creo que todos sabemos que las complejidades del sistema de módulos son súper interesantes y divertidas, así que no hay tiempo para convencerte, pero si viste la charla de Mark Erickson y no tuviste suficiente, esta es definitivamente la charla para ti. Antes de comenzar, hay un poco de terminología que debemos cubrir. Voy a usar el término ESM o el acrónimo ESM alrededor de cien veces en esta charla. Eso significa Módulo ECMAScript. ESM es el sistema de módulos que se agregó a la especificación del lenguaje JavaScript en 2015. Y puedes reconocerlo por las palabras clave import y export. El otro sistema de módulos que discutiremos es CommonJS o CJS. Ese es el estándar de la comunidad que fue popularizado por Node antes de que existiera ESM. Si alguna vez has visto require y module.exports, eso es CommonJS y aún es compatible con Node. También tendré que mencionar algunas extensiones de archivo durante esta charla. Y como pueden superponerse con otros acrónimos, intentaré recordar pronunciarlos con un punto al principio. Será algo útil si estás al menos vagamente familiarizado con algunas opciones de resolución de módulos y TypeScript. Node.16 y Node.Next son actualmente idénticos, así que puedo llamarlos por cualquiera de los dos nombres. Son la única buena opción para Node moderno y no solo significa emitir módulos ES. Esa es una idea equivocada común. Históricamente, el que se llamaba Node era el que todos usaban para casi todo, pero realmente

2. Entendiendo el error de TypeScript con Helmet

Short description:

Vamos a analizar un confuso error de TypeScript con la dependencia de NPM Helmet. Cuando se compila a CommonJS, todo funciona bien. Sin embargo, al cambiar a módulos ES, se produce un error en el que helmet ya no se puede llamar. Vamos a investigar más a fondo ejecutando el código.

Helmet no se ha mantenido al día con las características modernas. Vamos a echar un vistazo a un error de TypeScript un tanto confuso aquí. Estoy mirando la dependencia de NPM llamada Helmet. Acabo de copiar y pegar el ejemplo del archivo README aquí. Esto se compila con TSC y se ejecuta en Node sin problemas. Puedes ver que actualmente estoy compilando a CommonJS. Si quiero cambiar a módulos ES aquí, puedo hacerlo agregando el campo type module a mi propio package JSON para el proyecto. Pero cuando hago eso y vuelvo aquí, ahora obtengo este confuso error de TypeScript que dice que helmet ya no se puede llamar. Si juego lo suficiente con esto, veré TypeScript

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

Vite: Repensando las Herramientas de Frontend
JSNation Live 2021JSNation Live 2021
31 min
Vite: Repensando las Herramientas de Frontend
Top Content
Vite es una nueva herramienta de construcción que pretende proporcionar un flujo de trabajo más delgado, rápido y sin fricciones para la construcción de aplicaciones web modernas. Esta charla se sumergirá en el trasfondo del proyecto, la justificación, los detalles técnicos y las decisiones de diseño: qué problema resuelve, qué lo hace rápido y cómo encaja en el panorama de las herramientas JS.
Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
¿Tienes un producto grande construido por muchos equipos? ¿Estás luchando para lanzar a menudo? ¿Se convirtió tu frontend en un monolito inmantenible masivo? Si, como yo, has respondido sí a cualquiera de esas preguntas, ¡esta charla es para ti! Te mostraré exactamente cómo puedes construir una arquitectura de micro frontend con Remix para resolver esos desafíos.
Compilador React Forget - Entendiendo React Idiomático
React Advanced Conference 2023React Advanced Conference 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
React ofrece un contrato a los desarrolladores: cumple ciertas reglas y React puede actualizar eficiente y correctamente la interfaz de usuario. En esta charla exploraremos estas reglas en profundidad, entendiendo el razonamiento detrás de ellas y cómo desbloquean nuevas direcciones como la memoización automática.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
Remix es un marco de trabajo web que te ofrece el modelo mental simple de una aplicación de múltiples páginas (MPA) pero el poder y las capacidades de una aplicación de una sola página (SPA). Uno de los grandes desafíos de las SPA es la gestión de la red que resulta en una gran cantidad de indirecciones y código defectuoso. Esto es especialmente notable en el estado de la aplicación que Remix elimina por completo, pero también es un problema en los componentes individuales que se comunican con un punto final de backend de un solo propósito (como una búsqueda de combobox, por ejemplo).
En esta charla, Kent demostrará cómo Remix te permite construir componentes de interfaz de usuario complejos que están conectados a un backend de la manera más simple y poderosa que hayas visto. Dejándote tiempo para relajarte con tu familia o lo que sea que hagas para divertirte.
TypeScript y React: Secretos de un matrimonio feliz
React Advanced Conference 2022React Advanced Conference 2022
21 min
TypeScript y React: Secretos de un matrimonio feliz
Top Content
TypeScript y React son inseparables. ¿Cuál es el secreto de su exitosa unión? Bastante código extrañamente extraño. Aprende por qué useRef siempre se siente extraño, cómo manejar los genéricos en los hooks personalizados y cómo los tipos de unión pueden transformar tus componentes.
Haciendo JavaScript en WebAssembly Rápido
JSNation Live 2021JSNation Live 2021
29 min
Haciendo JavaScript en WebAssembly Rápido
Top Content
JavaScript en el navegador se ejecuta muchas veces más rápido de lo que lo hacía hace dos décadas. Y eso sucedió porque los proveedores de navegadores pasaron ese tiempo trabajando en intensivas optimizaciones de rendimiento en sus motores JavaScript.Debido a este trabajo de optimización, JavaScript ahora se está ejecutando en muchos lugares además del navegador. Pero todavía hay algunos entornos donde los motores JS no pueden aplicar esas optimizaciones de la manera correcta para hacer las cosas rápidas.Estamos trabajando para resolver esto, comenzando una nueva ola de trabajo de optimización de JavaScript. Estamos mejorando el rendimiento de JavaScript para entornos completamente diferentes, donde se aplican reglas diferentes. Y esto es posible gracias a WebAssembly. En esta charla, explicaré cómo funciona todo esto y qué vendrá a continuación.

Workshops on related topic

React, TypeScript y TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
React Advanced Conference 2022React Advanced Conference 2022
148 min
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
¿Eres un desarrollador de React tratando de obtener los máximos beneficios de TypeScript? Entonces esta es la masterclass para ti.En esta masterclass interactiva, comenzaremos desde lo básico y examinaremos los pros y contras de las diferentes formas en que puedes declarar componentes de React usando TypeScript. Después de eso, pasaremos a conceptos más avanzados donde iremos más allá de la configuración estricta de TypeScript. Aprenderás cuándo usar tipos como any, unknown y never. Exploraremos el uso de predicados de tipo, guardias y comprobación exhaustiva. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapa de tipo nuevo. Y comenzaremos a programar en el sistema de tipos de TypeScript usando tipos condicionales e inferencia de tipos.
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
React Day Berlin 2022React Day Berlin 2022
86 min
Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?
En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.
Consejos y Trucos Profundos de TypeScript
Node Congress 2024Node Congress 2024
83 min
Consejos y Trucos Profundos de TypeScript
Top Content
Workshop
Josh Goldberg
Josh Goldberg
TypeScript tiene un sistema de tipos poderoso con todo tipo de características sofisticadas para representar estados de JavaScript salvajes y extravagantes. Pero la sintaxis para hacerlo no siempre es sencilla, y los mensajes de error no siempre son precisos al decirte qué está mal. Vamos a profundizar en cómo funcionan muchas de las características más poderosas de TypeScript, qué tipos de problemas del mundo real resuelven, y cómo dominar el sistema de tipos para que puedas escribir código TypeScript verdaderamente excelente.
Pruebas de Aplicaciones Web utilizando Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Pruebas de Aplicaciones Web utilizando Cypress
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
Este masterclass te enseñará los conceptos básicos de cómo escribir pruebas de extremo a extremo utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, abarcando todas las características de la aplicación, estructurando las pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquier persona que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir el masterclass.
Construye un potente DataGrid en pocas horas con Ag Grid
React Summit US 2023React Summit US 2023
96 min
Construye un potente DataGrid en pocas horas con Ag Grid
WorkshopFree
Mike Ryan
Mike Ryan
¿Tu aplicación React necesita mostrar eficientemente muchos (y muchos) datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está llena de características, es altamente eficiente y extensible. En esta masterclass, aprenderás cómo empezar con AG Grid, cómo podemos habilitar la ordenación y el filtrado de datos en la cuadrícula, la representación de celdas y más. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación React.
Todos sabemos que crear nuestra propia solución de cuadrícula no es fácil, y seamos honestos, no es algo en lo que deberíamos estar trabajando. Estamos enfocados en construir un producto e impulsar la innovación. En esta masterclass, verás lo fácil que es empezar con AG Grid.
Prerrequisitos: React y JavaScript básicos
Nivel de la masterclass: Principiante