jquery - Cómo usar "/// <reference types="bootstrap" />" en el navegador

En un archivo de TypeScript tengo las líneas,

/// <reference types="jquery" />

/// <reference types="bootstrap" />

porque estoy haciendo referencia a jQuery y Bootstrap desde un CDN en el HTML.

<script src="https://cdn.jsdelivr.net/npm/[email /dist/js/bootstrap.bundle.min.js"</script>

Así que uso el código de ejemplo,

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {keyboard: false})

Pero recibo el error "No se puede encontrar el nombre 'bootstrap'. ¿Quiso decir 'Bootstrap'? ts(2552)"

Intenté cambiar a "Bootstrap" pero obtengo otro error "'Bootstrap' se refiere a un global UMD, pero el archivo actual es un módulo. Considera agregar una importación en su lugar.ts(2686)"

Así que intento agregar la importación que sugiere,

import Bootstrap from "bootstrap";

Pero esto resulta en que esa línea exacta se coloque en el archivo .mjs, lo que me da un error en tiempo de ejecución "Uncaught TypeError: Failed to resolve module specifier 'bootstrap'. Relative references must start with either '/', './', or '../'." en el navegador. En el archivo .js, coloca un "require" que también resulta en un error en tiempo de ejecución en el navegador.

Si modifico manualmente el archivo .mjs y elimino la importación y uso "bootstrap.Modal", funciona bien.

Entonces, ¿cómo debería usar Bootstrap en el navegador desde un archivo TypeScript que resulte en un código adecuado en los archivos .mjs o .ts? Gracias

Respuesta #1

Después de probar muchas soluciones diferentes, terminé simplemente dándome por vencido y añadiendo la siguiente línea después de la referencia. declare var bootstrap: any; También cambié a rollup usando el formato de salida 'iife', pero no estoy seguro de que eso hiciera alguna diferencia para este problema.