Saltar al contenido

¿Cuál es el ejemplo más simple posible de dónde la palabra clave `declare` es útil en TypeScript?

Solución:

Tu ejemplo es correcto. Por ejemplo, está utilizando un módulo de nodo que está escrito en javascript simple (no hay mecanografía disponible), por lo que el tscompiler notará que (ya que busca las mecanografías que generalmente se encuentran en el módulo de nodo o un extra @typings/package).

Sin embargo, puede proporcionar esos mecanografiados usted mismo indicándole al compilador tscompiler en el tsconfig.json mirar archivo xyz.d.ts para los mecanografiados, por ejemplo

tsconfig.json
{
  "files": [
    "typings/index.d.ts"
  ]
}

los index.d.ts es donde se recopilan todas sus mecanografías personalizadas, que pueden verse así

index.d.ts
/// <reference path="custom-typings.d.ts" />

y el custom-typings.d.ts tiene los mecanografiados reales en él. Aquí es donde el declare la palabra clave entra en juego

custom-typings.d.ts
declare module "the-untyped-node-module-name" {
    export default class TheNodeModuleClass { 
        static showNotification(string: any): void;
    }
}

Ahora el compilador de TypeScript sabe que hay un TheNodeModuleClass en the-untyped-node-module-name que tiene la función estática showNotification.

Para obtener más información, consulte Módulos Typscript.


Este es un caso de uso de la palabra clave declare. Por supuesto, hay más como declare var, declare function, declare class etcétera.

La respuesta de Murat Karagöz anterior señaló en la dirección correcta, y esta respuesta proporcionará un código real con el ejemplo mínimo de dónde usaríamos declare.

Aquí hay un módulo npm muy simple: solo uno index.js archivo que exporta un objeto con un método. No hay declaraciones de tipo aquí porque es solo JS.

const item = {
    price: 5,
    name: 'item1',
};

export const MyModuleObject = { method: () => item };

Aquí hay un proyecto npm de TypeScript muy simple, con una dependencia: el proyecto JS vinculado anteriormente. Por lo tanto, este último es un módulo npm importado sin tipificaciones. Aquí está el archivo index.ts en el proyecto TS:

/// <reference path="index.d.ts"/>

import { MyModuleObject } from 'npmModule';

import { LocalModuleObject } from './module';

// Without the "reference path" line, TS complains in line 3 that it could not find a declaration file for 'npmModule'.
// In this case, the import has type any, so TS does not complain about the call below to an inexistent method.
// When we uncomment line 1, we get a TS error on line 8: property 'test' does not exist on type { method: ... }
MyModuleObject.test();


// TS complains that test does not exist on type { method: ... }
// Here we did not need to have a `declare` statement in a type definitions file for TS to know this because here TS is
// using contextual typing:
LocalModuleObject.test();

A continuación se muestra el código para index.d.ts:

declare module "npmModule" {
    export const Item: {
        price: number,
        name: string
    }

    export const MyModuleObject: {
        method: () => Item
    }
}

Y el código para ./module:

export const LocalModuleObject = { method: () => 10 };

¿Cómo es este un ejemplo de por qué se usa declare?
– Pongo esto en los comentarios de index.ts, pero déjame explicarte con más palabras. index.ts está importando un objeto de un módulo externo (uno que está en node_modules) y otro objeto de un módulo local (./module.js). Ambos módulos están exportando un objeto con un método llamado method en eso. En index.ts Estoy llamando a un método inexistente test en cada uno de estos objetos.

TS usa escritura contextual en la importación del módulo local, por lo que sabe que test no existe en el objeto. Esto no sucede en la importación del objeto en el módulo externo: esta importación se importa con el tipo any. Por tanto, TS no se queja de la llamada al método inexistente test. Sin embargo, se queja de que no hay mecanografía para el módulo externo, por lo que esta es una pista de que implícita any esta siendo usado.

Podemos remediar esta última queja definiendo un index.d.ts que proporciona mecanografía para la biblioteca externa. Aquí es donde declare module se usa: declara qué es lo que el módulo npmModule exportaciones; npmModule es la importación externa. En index.ts debemos agregar la línea /// <reference path="index.d.ts"/> por lo que TS sabe dónde buscar tipos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags : /

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *