Come utilizzare una libreria esterna non dattiloscritta da dattiloscritto senza .d.ts?


100

Li ho definiti nel mio file .html:

<script type="text/javascript" src="bower_components/tree.js/tree.min.js"></script>
<script type="text/javascript" src="bower_components/q/q.js"></script>
<script type="text/javascript" src="test.js"></script>

Quindi in test.js:

 var myTree = Tree.tree({})

Ma gli errori di dattiloscritto dicono: "Impossibile trovare il nome" Albero ""

Ho anche provato a compilare --module amde posizionare import Tree = require("model/tree");in cima al file test.js, ma si verifica di nuovo un errore: Cannot find external module 'model/tree'.tuttavia chiaramente dovrebbe essere un'importazione valida, guarda qui dove è stata definita: https://github.com/marmelab/tree .js / blob / master / src / main.js

Io non voglio scrivere i file .d.ts per ogni singolo file JavaScript esterno che voglio usare, è che sul serio quello tipografico vuole che io faccia?


1
Non è necessario scrivere file .d.ts. Vedi stackoverflow.com/questions/27273489/… per un esempio
xmojmr

interessante, questo mi richiederebbe comunque di dichiarare oggetti. Avevo l'impressione che Typescript fosse completamente compatibile con javascript. Immagino abbia senso dal punto di vista del dattiloscritto, in qualche modo ha bisogno di leggere il codice e se non avesse i riferimenti bene, sarebbero errori.
Blub

Risposte:


124

Non voglio scrivere file .d.ts per ogni singolo file javascript esterno che voglio usare, è davvero quello che Typescript vuole che faccia?

No. La soluzione più semplice / veloce è semplicemente dirgli che c'è qualche variabile Treelà fuori. Questo è semplice come:

declare var Tree:any; // Magic
var myTree = Tree.tree({})

TypeSafety è una scala mobile in TypeScript. In questo caso stai solo dicendo al compilatore che c'è qualcosa chiamato Treeche gestirai e non ti interesserà molta sicurezza dei tipi oltre al fatto che è lì .

Di Più

IMHO: La declare var Tree:any;sintassi della riga è molto più semplice di quella che altri strumenti di veficazione JS vorrebbero far scrivere per dichiarare l'utilizzo di variabili che non sono presenti nel codice.

Aggiornare

interface ITree {
    .. further methods and properties...
}

interface ITreeFactory {
    tree(input: { [key: string]: any }): Itree
};

declare var Tree: ITreeFactory; // magic...

Si lamentava per me quando ho usato questo metodo. Ho dovuto utilizzare il metodo illustrato di seguito da Anton. La tua quantità di moto può variare però! Grazie per la risposta basarat.
Tiz

puoi anche specificare il tipo come interfaccia invece di qualsiasi altra che fornirà un intellisense migliore.
Akash Kava

24

Puoi definire tu stesso 'require' e utilizzare la funzione di dipendenza amd non documentata di TypeScript:

/// <amd-dependency path="model/tree" />
declare var require:(moduleId:string) => any;
var Tree = require("model/tree");

La direttiva 'amd-dependency' dirà al compilatore di includere il tuo modulo per "definire" gli argomenti nel codice generato: guarda un esempio qui .

Puoi anche controllare un ottimo articolo che spiega come usare TypeScript con RequireJS.

Ma si noti che senza scrivere definizioni TypeScript corrette per il codice esistente non verrà fornita alcuna informazione sul tipo, quindi non si ottengono controlli di sicurezza sui tipi, completamento del codice avanzato negli strumenti e così via. Quindi, il tuo "Albero" sarà effettivamente di tipo "qualsiasi", e in realtà sarà un pezzo JS dinamico all'interno di un altro codice TS.


Non è una grande idea quando si utilizza webpack, webpack richiederà che questo modulo sia presente durante il transpiling ...
Akash Kava
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.