javascript - ¿Alguna vez necesito allowSyntheticDefaultImports explícito si esModuleInterop está activado al configurar la transpilación de TypeScript?

Necesito confirmación sobre la siguiente teoría. Según la documentación de TS, hay dos opciones que se pueden configurar en tsconfig.json.

1. --allowSyntheticDefaultImports: Permitir importaciones por defecto desde módulos sin exportación por defecto. Esto no afecta la emisión de código, solo la verificación de tipos.

2. --esModuleInterop: Emitir los ayudantes __importStar y __importDefault para la compatibilidad del ecosistema de babel en tiempo de ejecución y habilitar --allowSyntheticDefaultImports para la compatibilidad con el sistema de tipos.

Cuando busco en Google, veo que ambos se establecen en true (al menos en lo que respecta al comportamiento que estoy buscando). Sin embargo, según entiendo la documentación, TS y la transpilación a JS, no tiene sentido usar ambos.

Según lo que pienso, podría usar solo el último y eliminar completamente el primero. Sin embargo, siendo cauteloso y humilde, no estoy completamente seguro y me preocupa estar haciendo algo menos acertado sin darme cuenta en este momento.

Temo que sea algo inapropiado que me vaya a morder en el trasero más adelante, causando horas de lamento y arrancarse los cabellos mientras intento solucionar problemas desesperadamente. La base del escepticismo es que ambas opciones están disponibles, así que estoy infiriendo que hay cuatro casos en los que se requieren todas las combinaciones (true/false, etc.), pero no puedo imaginar cuáles son.

¿Es completamente seguro omitir --allowSyntheticDefaultImports si --esModuleInterop: true en compilerOptions? Y si es así, ¿por qué tenemos esa opción?

Pregunta adicional: ¿cuándo se requiere con las cuatro combinaciones (true/false) de esas dos opciones?

Respuesta #1

Si te refieres a si puedes dejar allowSyntheticDefaultImports sin definir y definir solo esModuleInterop, la respuesta debería ser SÍ en adelante, pero ha habido un problema con esto. El PR #26866 parece ser una solución, solo que se fusionó el 17 de septiembre, por lo que puede haber algún riesgo a corto plazo.

En cuanto a por qué ambos existen, creo que ambos formaban parte de abordar problemas de compatibilidad con las importaciones de módulos transpilados por Babel, el PR original agregó la opción allowSyntheticDefaultImports a ciertos mensajes en tiempo de compilación, pero en la práctica no abordaba el comportamiento en tiempo de ejecución de las importaciones. Por eso se agregó más tarde --esModuleInterop. Consulte TypeScript-Handbook/#816 para la discusión sobre cómo actualizar la documentación...

Respuesta #2

Bueno, mi comprensión es que allowSyntheticDefaultImports es para poder cargar bibliotecas CommonJS de una manera más simple si apuntas a es6+ (en tiempo de desarrollo), mientras que esModuleInterop es para simplificar estas importaciones (en tiempo de ejecución) si apuntas, por ejemplo, a AMD (como yo lo hago).

Según la documentación, no deberías necesitar especificar allowSyntheticDefaultImports explícitamente si tienes esModuleInterop habilitado, pero la razón por la que tuve que habilitar también allowSyntheticDefaultImports es que Resharper parece mirar esa bandera cuando realiza la verificación de sintaxis en Visual Studio. Claro, se compiló y funcionó bien de todos modos solo con esModuleInterop, pero recibí muchas advertencias rojas de Resharper hasta que habilité también la otra bandera.