javascript - ¿Cuándo se usa declare en TypeScript?

En TypeScript, ¿por qué a veces necesitas usar declare para declarar una variable, y a veces no (la misma pregunta es válida para funciones, ...)?

Para dar un ejemplo: ¿Cuándo (y por qué) uso

declare var foo: number;

si

let foo: number;

haría lo mismo (al menos me parece que hace lo mismo, es decir, ambos declaran una variable llamada foo de tipo number). ¿Cuál es la diferencia?

Respuesta #1

Nunca usas declare para declarar una variable. Simplemente lo usas para hacerle saber a TypeScript que la variable existe, aunque no esté declarada en el código (por ejemplo, porque es una global declarada en otro código, o porque vas a combinar la salida de JavaScript de tsc con otro archivo que declare la variable). O dicho de otra manera: solo la declara para el compilador de TypeScript, no para el entorno de ejecución de JavaScript.

Si usas el playground para compilar tu declare var foo: number;, literalmente no produce nada para esa declaración; ejemplo.

En contraste, let foo: number; (o var foo: number;) es una declaración de variable; ejemplo.

Respuesta #2

En TypeScript, "declare var foo: number;" significa: "En el código hay un número llamado foo. Sé que no lo vas a recuperar. Pero por favor, confía en mí y actúa como si lo conocieras.". Es una especie de declaración adelantada tal como se puede ver en C/C++.

Ejemplo:

Supón que estás escribiendo un script TS usando jQuery. Incluirías todo el JavaScript así en alguna parte de tu página HTML:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="myscript.js"></script> <!-- generated from TypeScript, with something like "tsc myscript.ts" -->

Como consecuencia, no es necesario incluir jQuery en tu script TS, ya que el JS generado a partir de tu script TS sabrá todo sobre las cosas de jQuery. Sin embargo, el transpiler de TS señalará el icónico "$()" de jQuery muchas veces en tu código. No incluyes jQuery en tu código TS (porque no es necesario), así que no sabe nada sobre "$()". En consecuencia, te reportará muchos errores preguntándote qué diablos es este "$" que ve por todas partes en el código. Para resolver todos esos errores relacionados con $, escribirás "declare var $: jQuery;" al inicio de tu script TS. Al escribir esto, le dices esto al transpiler de TS:

En el código hay una variable llamada "$" cuyo tipo es "jQuery". Sé que no la habrías obtenido. Pero asume que existe y por favor actúa como si hubiera un "import "aTSfile.ts";" que la describe perfectamente para ti (una descripción tal como la uso) antes en el código. Confía en mí, JavaScript sabrá qué es REALMENTE ese "$" cuando se ejecute el script. No te preocupes por eso. ;-)