Búsqueda de sitios web

requirejs - ¿Incluir automáticamente dependencias AMD en un módulo AMD de Typescript?


¿Existe una manera de importar o anotar módulos de Typescript de tal forma que los módulos externos AMD se incluyan automáticamente como dependencias al generar un módulo compatible con AMD?

tsc --module AMD example.ts

He intentado incluir ambos, incluyendo un archivo de referencia *.d.ts, y exportando declaraciones declare:

///<reference path='./lib/knockout-2.2.d.ts' />

export declare var $;
export declare var _;

export module example {
    export class Example {
        // whatever
    }
}

Sin embargo, el módulo generado no incluye estos:

define(["require", "exports"], function(require, exports) {
    (function (example) {
        var Example = (function () {
            function Example() { }
            return Example;
        })();
        example.Example = Example;        
    })(exports.example || (exports.example = {}));
    var example = exports.example;
})

Realmente me gustaría evitar crear módulos "falsos" aquí.

Parece una buena solución y el uso sería permitir importar módulos AMD directamente:

var $ = import('jquery'); // This is a requirejs/AMD module, not a typescript file.

pero no sé qué tan factible sea eso.

Editar :

Y también he intentado este enfoque mencionado aquí: Importar módulo TypeScript usando solo la definición ambiental para su uso en AMD

import knockout = module("./lib/knockout-2.2.d.ts");
...

pero obtén estos errores de compilador:

example.ts(1,32): The name '"./lib/knockout-2.2.d.ts"' does not exist in the current scope
example.ts(1,32): A module cannot be aliased to a non-module type

Respuesta #1

Esto :

declare module 'jquery' { export var n; };

import $ = module('jquery');

export module foo {
    var n = $.n;
}

Se traducirá en una llamada correcta a define:

define(["require", "exports", 'jquery'], ...

Tenga en cuenta que si no utiliza un valor importado ($ en este ejemplo) en una posición de valor (en lugar de solo en posiciones de tipo), el compilador eliminará esa dependencia mediante optimización.

Respuesta #2

En las versiones más recientes de TypeScript, la forma correcta de hacer esto es...

Ejemplo (resulta ser jQuery)

Paso 1: Descargue el archivo de definición desde NuGet (es decir, jquery.typescript)

Paso 2: Aquí está el código (el comentario de referencia no es necesario en Visual Studio):

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

import $ = require('jquery');

export module foo {
    var elem = $('#myid');
}

El JavaScript resultante:

define(["require", "exports", 'jquery'], function(require, exports, $) {
    (function (foo) {
        var elem = $('#myid');
    })(exports.foo || (exports.foo = {}));
    var foo = exports.foo;
});

Nocaut

Algunas personas estaban teniendo problemas con Knockout... La misma técnica funciona para Knockout...

/// <reference path="scripts/typings/knockout/knockout.d.ts" />

import ko = require('knockout');

export module foo {
    var obs = ko.observable('example');
}

El JavaScript resultante:

define(["require", "exports", 'knockout'], function(require, exports, ko) {
    (function (foo) {
        var n = ko.observable('example');
    })(exports.foo || (exports.foo = {}));
    var foo = exports.foo;
});

Artículos relacionados