Pourquoi avons-nous besoin de la declare
dans la déclaration?
export declare class Actions {
...
}
trouvé ce que je cherchais:
Déclarer vs var
var
crée une nouvelle variable. declare
est utilisé pour indiquer à TypeScript que la variable a été créée ailleurs. Si vous utilisez declare
, rien n'est ajouté au code JavaScript généré - il s'agit simplement d'un indice pour le compilateur.
Par exemple, si vous utilisez un script externe qui définit var externalModule
, vous utiliserez declare var externalModule
pour indiquer au compilateur TypeScript que externalModule
a déjà été configuré.
Pour comprendre cela, vous devez d'abord comprendre le mot clé "declare".
Voici une bonne explication de blog de Gil Fink :
Le mot-clé TypeScript declare est utilisé pour déclarer des variables qui pourraient ne pas provenir d'un fichier TypeScript.
Par exemple, imaginons que nous ayons une bibliothèque appelée myLibrary qui n’a pas de fichier de déclaration TypeScript ni d’espace de noms appelé myLibrary dans l’espace de noms global. Si vous souhaitez utiliser cette bibliothèque dans votre code TypeScript, vous pouvez utiliser le code suivant:
declare var myLibrary;
Le type que l'exécution TypeScript donnera à la variable myLibrary est le type any. Le problème ici est que vous n’avez pas Intellisense pour cette variable au moment du design, mais vous pourrez utiliser la bibliothèque dans votre code. Une autre option pour avoir le même comportement sans utiliser le mot-clé declare consiste simplement à utiliser une variable de type any:
var myLibrary: any;
Les deux exemples de code donneront la même sortie JavaScript, mais l'exemple de déclaration est plus lisible et exprime une déclaration ambiante.
Donc, une fois que vous avez compris le mot-clé "declare", retournez à l'endroit où vous trouvez le
export declare class Action{
...
}
La véritable implémentation de la classe se trouve probablement ailleurs, peut-être dans un fichier .js.
declare
dans TypeScript:Le mot clé declare
de TypeScript est utile pour indiquer au compilateur TypeScript qu'un déclaration est défini ailleurs (écrit quelque part dans un fichier javascript externe ou dans une partie de l'environnement d'exécution).
Disons que nous avons une variable appelée foo déclarée ailleurs. Lorsque nous essayons ensuite de référencer la variable, le compilateur TypeScript renvoie une erreur:
foo = 'random'; // Error: 'foo' is not defined
Nous pouvons résoudre ce problème en utilisant le mot clé declare
:
declare var foo: string;
foo = 'random'; // no error anymore
Cela a les conséquences suivantes:
foo
n'est en fait déclaré nulle part ailleurs, et nous essayons d'utiliser la variable, une erreur d'exécution peut se produire. N'utilisez donc le mot clé declare
que lorsque vous savez que la variable est disponible à ce stade.Le mot clé declare dans ce cas spécifique:
export declare class Actions {
...
}
... est apparemment inutile et je pense que TypeScript devrait envisager de faire une erreur (je ne sais pas s'il y a une raison cachée). Si vous déclarez une classe, vous n'aurez jamais besoin de l'importer. Si vous exportez une classe en supposant que quelqu'un l'importe, vous n'avez pas besoin de la déclarer. Et puisque vous déclarez cette classe, par définition, cette classe devrait être utilisable sans qu'il soit nécessaire de l'importer. Mais ce n'est pas vrai quand vous export déclarez une classe. Vous besoin pour l'importer.
TL; DR
export declare class Actions {
...
}
est le même que
export class Actions {
...
}
declare
- sans mots-clés d'importation ou d'exportation - définit les fichiers de déclaration automatiquement sélectionnés par TypeScript, une fonctionnalité utile pour ajouter du typage aux modules hérités (paquets npm installés sans définitions TypeScript).
import
/export
est la manière appropriée d'utiliser les modules, et tout doit être importé manuellement (et je trouve un peu fastidieux), soit sa logique, soit sa définition.
export declare
vous permet d’éviter d’exporter tous les sous-éléments, par exemple:
export declare namespace Redux {
namespace Store {
interface Definition { ... }
}
}
Ce qui peut être plus facile à lire que:
export namespace Redux {
export namespace Store {
export interface Definition { ... }
}
}
L'importation externe est la même dans les deux cas (par exemple import { Redux } from 'definitions/redux';
), ce que je ne sais pas si c'est une bonne pratique ou non, mais je la trouve bien rangée! ^^
Il est important de garder à l'esprit que l'ajout d'une import
ou export
à votre fichier fera de celui-ci un module. Par conséquent, la portée de declare
ne sera plus au niveau mondial.
PS, il y a un bogue ( numéro 16671 ): si vous utilisez const enum
dans votre déclaration (je le fais pour le type d'actions Redux) et que vous avez spécifié le drapeau transpileOnly
( Le paquetage create-react-app-TypeScript le fait, c'est pourquoi je le sais), l'énumération ne sera pas en ligne! Vous pouvez y courir, vous ne pouvez pas, mais il est utile de savoir à l'avance!