Búsqueda de sitios web

typescript - Instalar @types/jquery resulta en una declaración global no deseada de $


Tengo lo siguiente definido en package.json:

{
  "dependencies": {
    "@types/jquery": "^3.5.5",
  }
}

Lo que añade la siguiente declaración de tipo a través de @types/jquery/misc.d.ts:

declare const jQuery: JQueryStatic;
declare const $: JQueryStatic;

Ahora tengo variables globales $ y jQuery definidas para todos mis módulos, pero esto no solo es indeseado... es incorrecto. Código similar al siguiente falla en tiempo de ejecución porque el compilador de TypeScript cree que $ es global cuando de hecho debe ser importado:

// $ is never imported here, and jQuery is not initialized globally in the browser

export function foo(node?:JQueryXML):void {
    node.children().each(function(_, el) {
        let node = $(el);
        if (node.attr("type") === VALUE) {
            doStuff();
        }
    });
}

Solo para estar seguro, intenté comentar esas dos líneas de declaración en @types/jquery/misc.d.ts y obtuve el error esperado:

error TS2592: Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i --save-dev @types/jquery` and then add 'jquery' to the types field in your tsconfig.

40    let node = $(el);

Sin embargo, ahora he deshabilitado efectivamente toda la verificación de tipos de jQuery. Tengo más de 50 errores adicionales porque todos los demás módulos donde importo correctamente $ están tratando la variable como any.

¿Cómo puedo indicarle al compilador de TypeScript que quiero las definiciones de tipo de @types/jquery pero que $ no es una variable global válida?

Respuesta #1

Puedes indicarle explícitamente a TypeScript los tipos que debe buscar en las opciones del compilador: https://www.typescriptlang.org/tsconfig#types

De los documentos:

Por defecto, todos los paquetes visibles ”@types” se incluyen en su compilación. Los paquetes en node_modules/@types de cualquier carpeta contenedora se consideran visibles. Por ejemplo, eso significa paquetes dentro de ./node_modules/@types/, ../node_modules/@types/, ../../node_modules/@types/, y así sucesivamente.

Si se especifican tipos, solo los paquetes listados se incluirán en el alcance global.

En este caso, el compilador está incluyendo automáticamente el tipo global de node_modules/@types/jquery.