Propósito de la palabra clave `declarar` en TypeScript
¿ Cuál es el significado de la declare
palabra clave?
type Callback = (err: Error | String, data: Array<CalledBackData>) => void;
vs.
declare type Callback = (err: Error | String, data:Array<CalledBackData>) => void;
No se pueden encontrar documentos que expliquen el propósito de la declare
palabra clave en TS. ¿Qué significa?
TL;DR
declare
se usa para decirle al compilador "esto (generalmente una variable) ya existe y, por lo tanto, otro código puede hacer referencia a él; además, no es necesario compilar esta declaración en ningún JavaScript".
Caso de uso común:
Agrega una referencia a su página web a un archivo JavaScript del que el compilador no sabe nada. tal vez sea un script proveniente de algún otro dominio como 'foo.com'. cuando se evalúa, el script creará un objeto con algunos métodos API útiles y lo asignará al identificador 'fooSdk' en el ámbito global.
Quiere que su código TypeScript pueda llamar fooSdk.doSomething()
, pero como su compilador no sabe fooSdk
que existe la variable, obtendrá un error de compilación.
Luego usa la declare
palabra clave como una forma de decirle al compilador "créame, esta variable existe y tiene este tipo". El compilador utilizará esta declaración para verificar estáticamente otro código, pero no lo transcompilará en ningún JavaScript en la salida.
declare const fooSdk = { doSomething: () => boolean }
La versión más nueva de Typecript requiere una sintaxis ligeramente diferente:
declare const fooSdk : { doSomething: () => boolean }
Del mismo modo, puede agregar la palabra clave declare a las propiedades de la clase para indicarle al compilador que no emita ningún código que crearía esta propiedad, asumiendo que tiene su propio código que la crearía y que el compilador no conoce o no comprende. .
Su ejemplo específico es diferente ya que está declarando un tipo, no una variable, los tipos ya no se compilan en ningún JavaScript. No sé si hay algún motivo para declarar un tipo.
Aquí hay un ejemplo del mundo real.
Tengo una aplicación TypeScript React que usa Webpack Hot Middleware. Webpack Hot Middleware no está escrito en TypeScript, sino en el antiguo JavaScript. Por lo tanto, no tiene declaraciones de tipo con las que el compilador de TypeScript pueda comparar.
Cuando ejecuto mi código, el objeto module
de Webpack Hot Middleware existe y puedo consolarlo. registrarlo a pesar de que es un JavaScript antiguo escondido en mi nueva y elegante aplicación TypeScript React.
El module
objeto también tiene claves, como module.hot
y las claves pueden tener valores. Pero el compilador de tiempo de diseño de TypeScript (al menos en VSCode) dibuja un garabato rojo debajo que dice property 'hot' does not exist
. ¡Pero sí existe!
Para que el compilador de TypeScript esté de acuerdo, declararlo así:
declare let module: any
El module
objeto existente ahora tiene un tipo de any
, lo que hace feliz al compilador de TypeScript, el rojo ondulado desapareció y ahora puedo continuar compilando y escribiendo mi otro código.
Si elimina la palabra clave declare
y simplemente escribe let module: any
, no se compilará, sino que dirá eso 'module' already exists
. Eso es lo que significa "ambiente" en la respuesta aceptada.