web-dev-qa-db-fra.com

Comment utiliser une bibliothèque externe non-TypeScript à partir de TypeScript sans .d.ts?

J'ai défini ceux-ci dans mon fichier .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>

Puis dans test.js:

 var myTree = Tree.tree({})

Mais les erreurs TypeScript en disant: "Impossible de trouver le nom 'Tree'"

J'ai aussi essayé de compiler avec --module AMD Et de placer import Tree = require("model/tree"); en haut du fichier test.js, mais l'erreur est à nouveau erronée: Cannot find external module 'model/tree'., Mais il devrait clairement s'agir d'une importation valide. , voyez ici où il a été défini: https://github.com/marmelab/tree.js/blob/master/src/main.js

Je ne veux pas écrire des fichiers .d.ts pour chaque fichier javascript externe que je veux utiliser. Est-ce vraiment ce que TypeScript veut que je fasse?

requirejstypescript
92
Blub

Je ne veux pas écrire de fichiers .d.ts pour chaque fichier javascript externe que je veux utiliser. Est-ce vraiment ce que TypeScript veut que je fasse?

Non. La solution la plus simple/rapide est simplement de lui dire qu'il existe une variable Tree. C'est aussi simple que:

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

TypeSafety est une échelle mobile dans TypeScript. Dans ce cas, vous ne faites que dire au compilateur qu'il y a quelque chose appelé Tree que vous allez gérer et que vous ne vous souciez pas de beaucoup de sécurité typographique au-delà du fait que c'est là.

Plus

IMHO: La ligne declare var Tree:any; est une syntaxe beaucoup plus simple que d’autres outils de virtualisation JS vous aurait écrit pour déclarer votre utilisation de variables qui ne sont pas présentes dans votre code.

Mise à jour

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

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

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

Vous pouvez définir vous-même le "besoin" et utiliser la fonctionnalité non documentée liée à AMD de TypeScript:

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

La directive 'AMD-dependency' demandera au compilateur d'inclure votre module pour "définir" les arguments dans le code généré: voir un exemple ici .

Vous pouvez également vérifier n très bon article qui explique comment utiliser TypeScript avec RequireJS.

Cependant, notez que sans écrire les définitions TypeScript appropriées pour votre code existant, aucune information sur le type ne vous sera fournie et vous ne recevrez donc pas de vérifications de sécurité de type, de complétion de code avancée dans les outils, etc. Ainsi, votre "Arbre" sera en fait de type "tout", et constituera en réalité un élément JS dynamique dans un autre code TS.

22
Anton