ProgramandooIntentándolo

Referencia a otras clases y a librerias externas javaScript en TypeScript

TypeScript reference

En TypeScript podemos hacer uso de otras clases aunque estén en archivos separados e incluso podemos utilizar clases y librerías javaScript siempre y cuando las referenciemos en nuestro código.

Referencia a otras clases en TypeScript

Para poder tener el código estructurado lo normal es que cada clase este en un archivo distinto, en javaScript esto no supone ningún problema porque si hacemos uso de una “clase” desde dentro otra solo tenemos que garantizar que en el momento en el que se ejecute el código estén cargadas todas las clases necesarias, es decir, necesitamos cargar los .js con las clases necesarias pero no es necesario hacer ninguna referencia entre los archivos javaScript.

En TypeScript hay una pequeña diferencia, y es que el compilador necesita tener acceso a las clases que se usan en el código para poder garantizar que la clase realmente existe y que se está utilizando de una forma correcta y por eso hay que referenciar las clases utilizadas.

La sintaxis para referenciar una clase en TypeScript es la siguiente:


/// <reference path="ruta/nombre.ts"/>

Sí, parece sintaxis html pero la referencia se hace dentro de los archivos .ts, el triple slash (las tres barras) forman parte de la sintaxis y realmente son las que indican al compilador que lo que viene después es una etiqueta XML con una directiva para el compilador, en este caso para poder utilizar las clases de otro fichero TypeSctipt.

En el atributo path se indica la ruta relativa del archivo con la clase o clases que se necesita importar o referenciar.

También es importante que las directivas estén al comienzo del archivo ya que solo pueden estar precedidas de comentarios.

Referencia a librerías externas javaScript en TypeScript

La forma de importar una librería javaScript, como jQuery por ejemplo, es muy similar a referenciar una clase TypeScript que se encuentre en otro archivo.


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

Del mismo modo que antes hacemos uso de reference, pero en lugar de hacer referencia al archivo de TypeScript debemos de utilizar un nombre_archivo.d.ts que es un archivo de definición de tipos de TypeScript puesto que estas librerías están escritas en javaScript y no cuentan con un .ts.

Los archivos de definición como su nombre indica solo contienen las definiciones de las clases junto con los tipos para usarse en TypeScript, pero no su código porque su finalidad es que podamos usarlas en nuestro código como si fuesen código TypeScript y que el compilador no nos muestre errores, por lo que los podemos ver como una interface que nos va a permitir utilizarlas con los beneficios que nos ofrece TypeScript.

No hay que olvidar que aunque hagamos la referencia en un archivo TypeScript esto solo sirve para que el compilador sepa lo que tiene que hacer y que al utilizar este código que hace uso de alguna librería o clase, es decir, debemos añadir tanto el .js correspondiente a la clase desde la que hacemos la referencia como los de las clases o librerías referenciadas desde nuestro HTML.

En la web de TypeScript podemos encontrar un enlace al proyecto de GitHub DefinitelyTyped donde podemos encontrar los archivos de definición de las librerías y frameworks javaScript más populares, para poder seguir usándolos aunque utilicemos TypeScript.