2012-12-12 18 views
8

Esiste un modo per importare o annotare moduli tipografico tale che i moduli AMD esterni verranno automaticamente inclusi come dipendenze quando si genera un modulo compatibile con AMD ?:Comprende automaticamente i deps AMD nel modulo AMD Typescript?

tsc --module AMD example.ts 

Ho cercato di includere sia compreso un riferimento * .d.ts di file, e le dichiarazioni di esportazione di dichiarare:

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

export declare var $; 
export declare var _; 

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

Tuttavia il modulo generato non include questi:

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; 
}) 

Vorrei davvero evitare di creare moduli "finti" qui.

Sembra una bella soluzione e il loro utilizzo potrebbe essere quella di consentire l'importazione direttamente moduli AMD:

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

ma io non so come fattibile che è.

Edit:

E ho anche provato questo approccio menzionato qui: Import TypeScript module using only ambient definition for use in amd

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

ma ottenere questi errori di compilazione:

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 
+0

Hai trovato una buona soluzione per questo? –

+0

No, nel mio caso ho iniziato a rendermi conto che era più facile concatenare la mia applicazione Typescript a un singolo file ('tsc --out') invece di preoccuparmi di AMD, dal momento che non ero in grado di caricare nulla. – 7zark7

+1

Ho appena trovato /// - ma posso testarlo per primo quando torno a casa. –

risposta

3

Nelle versioni più recenti del dattiloscritto il modo corretto per farlo è ...

Esempio (sembra essere jQuery)

Fase 1: Scaricare il file di definizione da NuGet (vale a dire jquery.dattiloscritto)

Fase 2: Ecco il codice (il commento di riferimento non è necessaria in Visual Studio):

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

import $ = require('jquery'); 

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

La JavaScript risultante:

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

Knockout

Alcuni persone hanno avuto problemi con Knockout ... La stessa tecnica funziona per Knockout ...

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

import ko = require('knockout'); 

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

La JavaScript risultante:

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

questo:

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

import $ = module('jquery'); 

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

si tradurrà in una vera e propria chiamata define:

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

Si noti che se non si utilizza un valore importato ($ in questo esempio) in una posizione valore (al contrario di solo in posizioni di tipo), il il compilatore ottimizzerà questa dipendenza.

+0

Grazie Ryan, ci proveremo. Mentre so che lo spazio del modulo JS è un po 'un casino con CommonJS, AMD, ecc. E non con l'errore TypeScript - sembra prezioso includere facilmente i moduli esterni in TS senza questi accorgimenti. – 7zark7

+2

non riesci a farlo funzionare per il knockout. quando import ko = module ('knockout'), ko non può essere usato come ko.observable() dopo –

0

La risposta di Ryan ha funzionato, tranne che la nuova dichiarazione nasconde i tipi a cui si fa riferimento nel file ".d.ts" con commento triplo.

Per ovviare a questo, si consiglia di provare a cambiare la dichiarazione come questa:

declare module 'knockout' { export = knockout; } 

non ho la prova con eliminazione diretta ma la soluzione dovrebbe funzionare con quella anche.

Problemi correlati