Importando jqueryui com o Typescript e o RequireJS

10

Eu tenho tido problemas para fazer o jQueryUI funcionar corretamente. Antes de tentar adicionar o jQueryUI, ter apenas o jQuery funcionou bem.

Com o código abaixo, atualmente recebo "TypeError: jQuery não é uma função (...)" no chrome, o que é estranho, considerando que jquery está marcada como uma dependência no arquivo require.config.

A compilação de .ts para .js acontece sem erros.

initApp.ts:

/// <reference path="../../../typings/jqueryui/jqueryui.d.ts"/>
import * as jQuery from "jquery"; //Works completely fine
import * as jQueryUI from "jquery-ui"; //Can't even find the module unless
                                       //d.ts file is modified

Compilado para js:

define(["require", "exports", "jquery-ui"], function (require, exports, jQuery) {...}

jqueryui.d.ts:

/// <reference path="../jquery/jquery.d.ts"/>
declare module JQueryUI { <unmodified code>}

//Added this declare

declare module "jquery-ui" {
  export = jQuery;
}

Require.config.js:

require.config({
    baseUrl: "./components/",
    paths: {
        "jquery": "./javascripts/lib/jquery-2.1.4",
        "jquery-ui": "./javascripts/lib/jquery-ui",
        "go": "./javascripts/lib/go-debug"
    },
    shim: {
        "jquery": {
          exports: "jQuery",
        },
        "jquery-ui": {
            //exports: "jQuery", //Adding this line doesn't fix the problem
            deps: ["jquery"],
        }
    },
});
require(["./javascripts/initApp"]);

Árvore de diretórios:

typings/
    jquery/
        jquery.d.ts
    jqueryui/
        jqueryui.d.ts
web/
    components/
        javascripts/
            lib/
                jquery-2.1.4.js
                jquery-ui.js
                require.js
            initApp.js
            initApp.ts
            require.config.js

Links para arquivos completos d.ts:

link (jquery V3.3)

link (QueryUI V1.12)

Qualquer ajuda seria muito apreciada

    
por Hackily 11.02.2016 в 18:11
fonte

4 respostas

3

Então, o que acontece é que você tem o jQuery que tem uma exportação, e o jQueryUi, que importa o jQuery, o aumenta e exporta $.widget não $.

Por isso, como eu acho que você já apontou,

import * as jQuery from 'jquery-ui';

é problemático.

Conforme você avisa,

import jQueryUi from 'jquery-ui';

Não funciona porque o jQueryUi nunca é usado em uma posição valor e, portanto, é eliminado pelo compilador, que é realmente útil, se complicado, comportamento que pode fazer vários cenários de carregamento assíncrono mais fácil.

O que você precisa é uma maneira de dizer ao TypeScript para realizar uma importação da biblioteca, independentemente de ela ser ou não usada, isto é, estamos importando-a para seu efeito colateral.

Felizmente, o TypeScript possui uma forma de importação que, por sua vez, vem do ECMAScript

import 'jquery-ui';

Deve fazer o truque, você não deve precisar dos shims para jQuery nos dias de hoje (não me cite sobre isso, meu AMD está enferrujado).

Então você só precisa do seguinte.

import $ from 'jquery';
// typescript will not remove this as the point of this syntax is: import for mutations!
import 'jquery-ui';

Você não precisa modificar seu require.config(....) , mas eu posso estar interpretando mal.

Além disso, observe as declarações jquery-ui , que você provavelmente deve update (seu link estava morto devido à reestruturação do pacote) não declara uma exportação e faz referência ao jQuery como um global que suga e bagunça cenários de várias versões .d.ts , mas não deve tornar um tempo de execução prático diferença no seu caso.

    
por Aluan Haddad 27.02.2017 / 10:27
fonte
0

Minha solução inicial costumava ser incorporada no corpo da minha pergunta. Estou repostando isso como uma resposta para atender às diretrizes editoriais do StackOverflow.

A resposta de Aluan responde diretamente a algumas das perguntas que coloquei neste bloco.

Posso corrigir manualmente o erro editando o javascript compilado para incluir os módulos "jquery" e "jquery-ui" e atribuindo-os às variáveis:

  

define (["requer", "exporta", " jquery ", " jquery-ui "], função (requer, exporta, jQuery , jQueryUI ) {...}

No entanto, eu queria que o compilador typescript fizesse isso automaticamente, ou algo semelhante para definir tanto o jquery-ui quanto o jquery como dependências do meu arquivo.

O TypeScript obtém o nome do módulo declarado e compila essa cadeia nos parâmetros de dependência da função AMD define (). Portanto, o arquivo d.ts de definição de TypeScript deve declarar o módulo pela mesma cadeia que representa minha biblioteca em require.config.js

Ter uma instrução de importação simplesmente não aciona nenhuma ação do compilador do TypeScript. Qualquer variável (neste caso, foo) em que as propriedades do módulo / biblioteca são importadas, precisa ser chamada pelo menos uma vez e não pode entrar em conflito com nenhuma variável existente nesse escopo.

Mais cedo, usei esta linha:

  

import * como jQuery de "jquery-ui"

Isso ocupou o nome da variável 'jQuery' e, assim, a função jQuery não pôde mais ser atribuída a esse nome de variável, resultando no erro: "jQuery não é uma função (...)"

Como o jquery-ui simplesmente estende a biblioteca jQuery, eu nunca preciso chamá-lo. Mas o compilador ficou esperto demais e decidiu não compilar o jquery-ui para ser uma dependência na minha definição (...). Esta foi uma solução fácil quando percebi o problema.

Código final

initApp.ts

/// <reference path="../../../typings/jqueryui/jqueryui.d.ts"/>
import * as jQueryUI from "jquery-ui";
import uiVar from "./uiVariables";
jQueryUI

Compilado para js:

  

define (["requer", "exporta", "jquery-ui"], function (requer, exporta, jQueryUI) {...}

require.config.js

require.config({
    baseUrl: "./components/",
    paths: {
        "jquery": "./javascripts/lib/jquery-2.1.4",
        "jquery-ui": "./javascripts/lib/jquery-ui",
        "go": "./javascripts/lib/go-debug"
    }
});
require(["./javascripts/app"]);
    
por Hackily 01.03.2017 / 17:09
fonte
0

Eu produzi um pequeno exemplo no GitHub para usar o TypeScript 2 com módulos ES 6 e JQuery / JQuery UI com plugins personalizados, espero que isso ajude: link

    
por Louis GRIGNON 07.03.2017 / 09:11
fonte
0

Eu também me deparei com esse problema. Depois de ler várias dessas perguntas, em que as respostas foram bastante confusas, descobri o seguinte:

incluindo caminhos de referência no topo de cada arquivo irá resolver este problema. Nenhuma outra mudança é necessária. O TS só precisa saber onde encontrar os arquivos de definição que descrevem todas as funções disponíveis. Incluir um ref direto em cada arquivo resolve esse problema:

/// <reference path="/typings/jquery.d.ts"/>
/// <reference path="/typings/someotherlibrary.d.ts"/>

Eu não consegui obter outros métodos mencionados para resolver adequadamente. (Eu presumo que eu sou apenas estúpido, mas poderia haver erros no código ou alterar a sintaxe nas APIs) Se você tiver um grande número de arquivos para resolver, essa abordagem pode não ser a melhor solução.

    
por Roger Hill 11.06.2018 / 23:44
fonte