2012-10-22 4 views
16

Ho un modulo che dipende da Backbone. Ho una definizione backbone.d.ts ma dattiloscritto non sembra voler compilare il mio modulo meno che il mioImportare il modulo TypeScript usando solo la definizione ambiente per l'uso nell'am

import Backbone = module("backbone") 

in realtà punta a un modulo dorsale valida al contrario di un file di definizione. Sto usando i moduli caricati AMD e ho uno shim richiesto per il backbone.

Esiste una soluzione alternativa oltre alla creazione di una definizione del modulo backbone.ts telefonica?

Aggiornamento: Un effetto collaterale della soluzione è che il codice come questo non funziona più perché il modulo non esiste più. Deve esistere a causa dello shim requirejs. L'unica soluzione che so di avere due file .d.ts. Uno per il file che utilizza il backbone come un'importazione che non include il bit declare module. L'altro per l'utilizzo di /// <reference include la riga declare module.

/// <reference path="../dep/backbone/backbone.d.ts" /> 

interface IApi { 
    version: number; 
    Events: Backbone.Events; 
} 

risposta

9

Il linguaggio TypeScript è cambiato un bel po 'da questa risposta originale.

Ad esempio, per importare un modulo esterno si utilizza require (la mia risposta originale aveva il vecchio module parola chiave):

Ecco un caso d'uso comune per l'importazione di backbone - utilizzando le informazioni di tipo dal Sicuramente digitato:

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

import bb = require('backbone'); 

All'interno della definizione del tipo, il modulo spina dorsale è dichiarato per voi, che è ciò che permette l'importazione di essere valida:

//... lots of code and then... 

declare module "backbone" { 
    export = Backbone; 
} 

Quindi la domanda originale potrebbe essere risolto utilizzando ...

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

import bb = require('backbone'); 

interface IApi { 
    version: number; 
    Events: bb.Events; 
} 

class Api implements IApi { 
    public version = 1; 
    public Events: bb.Events = null; 
} 

Per questo esempio di codice, questo è tutto ciò che è necessario - ma più spesso si vorranno biblioteca spina dorsale caricata in fase di esecuzione ... si può usare il commento (ufficialmente sperimentale) amd-dependency per causare la chiamata alla funzione generata define per includere il backbone.

/// <reference path="scripts/typings/backbone/backbone.d.ts" /> 
/// <amd-dependency path="backbone" /> 

import bb = require('backbone'); 

interface IApi { 
    version: number; 
    Events: bb.Events; 
} 

class Api implements IApi { 
    public version = 1; 
    public Events: bb.Events = null; 
} 
+1

Sto solo cercando questo per reale in Visual Studio e AM ricreando il tuo problema. Fammi vedere se riesco a risolvere questo problema! – Fenton

+1

Nel mio test, ho trovato che la Dichiarazione Ambientale deve omettere il blocco 'module', proprio come farebbe un normale modulo in AMD o CommonJS. – Fenton

+0

Eccellente, grazie! – ryan

7

v'è in realtà un altro modo per gestire in :

  1. clonare il repository DefinitelyTyped Github. Contiene jquery.d.ts, backbone.d.ts e molti altri file di definizione.

  2. link i file di definizione al file myfile.ts:
    /// <reference path="DefinitelyTyped/requirejs/require.d.ts" />
    /// <reference path="DefinitelyTyped/jquery/jquery.d.ts" />

  3. Aggiungi una dipendenza amd alla libreria javascript:
    /// <amd-dependency path="jquery"/>

  4. Per utilizzare $ dentro il file myfile.ts voi ora è possibile chiamare richiedere:
    var $ = require("jquery");

La versione completa di myfile.ts:

/// <reference path="DefinitelyTyped/requirejs/require.d.ts" /> 
/// <reference path="DefinitelyTyped/jquery/jquery.d.ts" /> 
/// <amd-dependency path="jquery"/> 
var $ = require("jquery"); 

export function helloWorld() { 
    $("<div>Hello World</div").appendTo(document.body); 
} 

Se si esegue tsc --module amd myfile.ts si otterrà il seguente codice javascript:

define(["require", "exports", "jquery"], function(require, exports) { 
    var $ = require("jquery"); 

    function helloWorld() { 
     $("<div>Hello World</div").appendTo(document.body); 
    } 
    exports.helloWorld = helloWorld; 
}); 
+0

Interessante, non ho visto '' prima di – ryan

+0

mi ha fatto uscire dai miei errori, grazie! –