Estoy tratando de

$(function(){ 
    alert('Hello'); 
});

Su muestra este error en Visual Studio: (TS) Cannot find name '$'.. ¿Cómo puedo usar jQuery con el Manuscrito ?

  • Sólo se puede incluir esta línea import * as $ from "jquery";

9 Comentarios

  1. 183

    Más probable es que usted necesita para descargar e incluir la Transcripción de la declaración de archivo para jQuery—jquery.d.ts—en su proyecto.

    Opción 1: Instalar el @paquete de tipos (Recomendado para TS 2.0+)

    En la misma carpeta que el paquete.json archivo, ejecute el siguiente comando:

    npm install --save-dev @types/jquery

    Entonces el compilador resolver las definiciones de jquery automáticamente.

    Opción 2: Descargar Manualmente (No Recomendado)

    Descargar aquí.

    Opción 3: Uso de Tipificaciones (Pre TS 2.0)

    Si usted está usando tipificaciones entonces usted puede incluir de esta manera:

    //1. Install typings
    npm install typings -g
    //2. Download jquery.d.ts (run this command in the root dir of your project)
    typings install dt~jquery --global --save

    Después de configurar el archivo de definición de importación, el alias ($) en el archivo de Transcripción para usarlo como lo haría normalmente.

    import $ from "jquery";
    //or
    import $ = require("jquery");

    Usted puede necesitar para compilar con --allowSyntheticDefaultImports—añadir "allowSyntheticDefaultImports": true en tsconfig.json.

    Instalar también el Paquete?

    Si usted no tiene instalado jquery, es probable que desee instalar como una dependencia a través de mecanismo nacional de prevención (pero este no es siempre el caso):

    npm install --save jquery
    • Tenido que reiniciar visual studio para que funcione, es pequeño paso, pero se tropezó me para un poco.
    • ¿cómo utilizar el nuevo npm install --save-dev @types/jquery ? Dónde encontrar más información acerca de esto, por favor?
    • verificar esta pregunta
    • para ayudar a los demás: a Continuación, sólo tiene que instalar jquery: npm install jquery y lo uso con la importación $ = require(‘jquery’);
    • También podría usar import * as $ from 'jquery'
    • Gracias a William Howley 🙂 Que la punta fue todo lo que necesita, junto con la respuesta de la opción 1.
    • ¿Cómo se /// <reference path="....jquery.d.ts..."/> relacionado con todo esto?
    • Estoy recibiendo el error Error TS1192 Module '"jquery"' has no default export.
    • Ugh. «Uncaught ReferenceError: las exportaciones no definido». No recuerdo cómo lo resuelto en el pasado!
    • ¿Qué quiere decir «En el proyecto de ejecución…» un símbolo de cmd y cd en el directorio del proyecto, a continuación, escriba el comando? O es que hay un lugar «en el proyecto’ dentro de visual studio para escribir esto?
    • actualizada la respuesta. Ejecute el comando en el directorio raíz donde el paquete.json se encuentra
    • Nota seguro de por qué, pero tuve que hacer lo @sobi que se sugiere a continuación así. mecanismo nacional de prevención de instalar jquery –save // guardar jquery como una dependencia
    • También es importante agregar que en la sección de tipos en el ts.config como @El que menciona en su buena respuesta

  2. 25

    PARA de Código de Visual Studio

    Lo que funciona para mí es para asegurarse de que hacer el estándar de la biblioteca de JQuery carga a través de un < script > etiqueta en la index.html.

    Ejecutar

    npm install --save @types/jquery

    Ahora el JQuery $ (funciones están disponibles en todos .archivos de ts, sin necesidad de cualquier otra de las importaciones.

    • esto funcionó para mí. Funciona para cualquier biblioteca?
    • Usted no necesita declarar jquery/$ en su Componente, Si TsLint es para estos tipos de Tipo de Revisiones. Por Ejemplo. javascript declare var jquery: any; declare var $: any;
    • Obras para Sublime Text editor también.
    • Trabajar con el código de visual studio así !.
    • Su sugerencia está funcionando bien. Puso como una respuesta. Gracias.
  3. 21

    En mi caso he tenido que hacer esto

    npm install @types/jquery --save-dev //install jquery type as dev dependency so TS can compile properly
    npm install jquery --save //save jquery as a dependency

    A continuación, en el archivo de secuencia de comandos A.ts

    import * as $ from "jquery";
    ... jquery code ...
  4. 19

    Creo que usted puede necesitar el Manuscrito tipificaciones para JQuery. Ya que usted dijo que usted está utilizando Visual Studio, puede utilizar Nuget para llegar a ellos.

    https://www.nuget.org/packages/jquery.TypeScript.DefinitelyTyped/

    El comando en la Consola del Administrador de Paquetes de Nuget es

    Install-Package jquery.TypeScript.DefinitelyTyped

    Actualización: Como se señaló en el comentario de este paquete no ha sido actualizado desde el año 2016. Pero aún se puede visitar su página de Github en https://github.com/DefinitelyTyped/DefinitelyTyped y descarga de los tipos. Navegar a la carpeta de la biblioteca y, a continuación, descargar el index.d.ts archivo allí. Pop en cualquier lugar en el directorio de proyecto y VS se debe de utilizar de inmediato.

    • El paquete de nuget para DefinitelyTypes ya no se mantiene. Usted recibirá una versión antigua de hacer esto.
  5. 10

    Angular de la CLI V7

    npm install jquery --save
    npm install @types/jquery --save

    Asegúrese de que jquery tiene una entrada en angular.json -> scripts

    ...
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js"
            ]
    ...

    Ir a tsconfig.app.json y agregar una entrada en «tipos»

    {
    "extends": "../tsconfig.json",
    "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["jquery","bootstrap","signalr"]
    },
    "exclude": [
    "test.ts",
    "**/*.spec.ts"
    ]
    }
  6. 8

    ACTUALIZACIÓN de 2019:

    Respuesta por David, es más precisa.

    Manuscrito soporta la 3ª parte del proveedor de las bibliotecas, que no utilice el Manuscrito de la biblioteca, el desarrollo, el uso de DefinitelyTyped Repo.


    Usted no necesita declarar jquery/$ en el Componente, Si tsLint es para estos tipos de Tipo de Revisiones.

    Por Ejemplo.

    declare var jquery: any;
    declare var $: any;
    • «si ellos tienen su tipificación instalado» no llego a conseguir. Quieres decir NO se instala? Por qué declarar como cualquier otra? Sólo quiero compilar sin errores y no instalar ningún material adicional y estoy trabajando con librerías que no tienen ningún tipo de instalar.
    • Creo que me escribió que, debido a que en los proyectos web como reactjs/angular, si webpack está configurado manualmente, la 3ª parte de las bibliotecas se definen a nivel mundial, y es difícil saber webpack donde estas bibliotecas son importados, lo que declare palabra clave se utiliza. Pero, aún así podemos decir vscode acerca de tipificaciones si están presentes en node_modules, es por eso que la instalación de tipificaciones de ayuda en intellisense, pero para una vainilla webpack proyecto, sin declare palabra clave proyecto transpilation falla. Me han quitado mi declaración de la respuesta, para no confundir a la gente.
    • De todos modos, no he tocado el violín con Angular/el Manuscrito durante mucho tiempo ahora, pero me siento, si tipificaciones se instalan, se podría haber hecho algo como esto – import JQuery from 'jquery'; declare var $: JQuery;. No estoy seguro, si esto va a funcionar.
    • He estado usando – typescriptlang.org/docs/handbook/…, en tsconfig, para suprimir la 3ª parte de los problemas de tipo.
  7. 1

    Si quieres utilizar jquery en una aplicación web (por ejemplo, Reaccionar) y jquery ya está cargado con <script src="jquery-3.3.1.js"...

    En la página web que usted puede hacer:

    npm install --save-dev @types/query
    and the use it with:
    let $: JQueryStatic = (window as any)["jQuery"];

    así, usted no necesita cargar jquery segunda vez (con npm install --save jquery)
    pero tiene todas las ventajas de los Manuscritos

  8. 0

    Esto funciona para mí:

    export var jQuery: any = window["jQuery"];
    • Esto iba a funcionar, pero no funcionan como inflexible, que pierde los beneficios de su uso con el Manuscrito de una obra en torno a si usted va para las bibliotecas externas. Todavía bastante un enfoque interesante.
  9. 0

    Aquí está mi Máquina & jQuery config pasos.

    Hace jQuery tipos de apoyo a trabajo mejor que la mayoría de los artículos en el internet . ( Yo creo. )

    primero:

    npm install jquery --save
    npm install @types/jquery --save-dev

    segundo( muy muy muy importante ! ! ! ):

    import jquery = require("jquery");
    
    
    
    //this helps TypeScript to understand jQuery best !!!  otherwise It will confused .
    const $: JQueryStatic = jquery;

    a continuación , Usted Puede Disfrutar de Ella :

    $(document).ready(function () {
        $('btn').click(function () {
           alert('I am clicked !')
        }
    }

    Es suave como la seda !!!

    • así, se han de escribir en cada uno de los componentes archivo ts?
    • Si usted enlazar jQuery en 【ventana】 , sólo se necesita agregar declare global { interface Window { $ :JQueryStatic; } } en yourTypeDeclaration.d.ts . Y en considerar correctamente , es necesario comprobar si $ es montado en 【ventana】. Como import $ = require('jquery'); window.$ = $ ; , o sus jQuery【$】 ha sido montado por el exterior de la etiqueta script .
    • que quieres decir, puede incluir un script en index.html y escribir que hay? typeDeclaration.ts angular 8 ? hay tsconfig.json
    • Así , se puede intentar la segunda solución import $ = require('jquery') ; window.$ = $; . (Sería mejor init éste , en su punto de inicio del proyecto . Y yo prefiero crear un sdk dir , para gestionar todas exteriores lib del requisito inicial y en un archivo o lugar ).
    • es sólo un Tipo Definido por el archivo . Es un archivo especial que define su auto tipos . En El Manuscrito , 【.d.ts】 es sólo un explícito de aislamiento manera , para distinguir el tipo de reconocer y verdadero código . También puede escribir la declaración de tipo-snipet en un 【.ts】 archivo , todavía funciona . (tal vez con algo de gramática revisión aviso)

Dejar respuesta

Please enter your comment!
Please enter your name here