¿Cómo usar una biblioteca externa no mecanografiada de mecanografiado sin .d.ts?

100

Los he definido en mi archivo .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>

Luego, en test.js:

 var myTree = Tree.tree({})

Pero los errores de TypeScript dicen: "No se puede encontrar el nombre 'Árbol'"

También intenté compilar --module amdy colocar import Tree = require("model/tree");en la parte superior del archivo test.js, pero vuelve a aparecer el error: Cannot find external module 'model/tree'.sin embargo, claramente debería ser una importación válida, vea aquí donde se definió: https://github.com/marmelab/tree .js / blob / master / src / main.js

Yo no quiero escribir archivos .d.ts para cada archivo JavaScript externo único que quiero usar, es que en serio lo de imprenta quiere que haga?

Lloriquear
fuente
1
No es necesario escribir archivos .d.ts. Consulte stackoverflow.com/questions/27273489/… para ver un ejemplo
xmojmr
interesante, eso aún me requeriría declarar objetos. Tenía la impresión de que Typescript era completamente compatible con javascript. Supongo que tiene sentido desde el punto de vista de TypeScript, de alguna manera necesita leer el código y si no tuviera referencias bien, serían errores.
Blub

Respuestas:

124

No quiero escribir archivos .d.ts para cada archivo javascript externo que quiero usar, ¿es eso en serio lo que Typescript quiere que haga?

No. La solución más simple / rápida es simplemente decirle que hay alguna variable Treeahí fuera. Esto es tan simple como:

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

TypeSafety es una escala móvil en TypeScript. En este caso, solo le está diciendo al compilador que hay algo llamado Treeque administrará y no le importa mucho la seguridad de tipos más allá del hecho de que está allí .

Más

En mi humilde opinión: la línea declare var Tree:any;es una sintaxis mucho más simple que la de otras herramientas de veficiación de JS que le pedirían que escriba para declarar el uso de variables que no están presentes en su código.

Actualizar

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

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

declare var Tree: ITreeFactory; // magic...
basarat
fuente
Me estaba quejando cuando usé este método. Tuve que utilizar el método que Anton establece a continuación. ¡Sin embargo, su kilometraje puede variar! Gracias por la respuesta basarat.
Tiz
también puede especificar el tipo como una interfaz en lugar de cualquiera que proporcione un mejor intellisense.
Akash Kava
24

Puede definir 'require' usted mismo y usar la función de dependencia amd no documentada de TypeScript:

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

La directiva 'amd-dependency' le dirá al compilador que incluya su módulo para "definir" argumentos en el código generado: vea un ejemplo aquí .

También puede consultar un artículo muy bueno que explica cómo usar TypeScript con RequireJS.

Pero tenga en cuenta que sin escribir definiciones de TypeScript adecuadas para su código existente, no se le proporcionará ninguna información de tipo y, por lo tanto, no obtendrá comprobaciones de seguridad de tipos, finalización avanzada de código en herramientas, etc. Entonces, su 'Árbol' en realidad será del tipo 'cualquiera', y en realidad será una pieza JS dinámica dentro de otro código TS.

Anton
fuente
No es una gran idea cuando se usa el paquete web, el paquete web requerirá que este módulo esté presente mientras se transpila ...
Akash Kava