Que fait «déclarer» dans «exporter déclarer des actions de classe»?

Pourquoi avons-nous besoin du declaredans la déclaration?

export declare class Actions {
    ...
}

trouvé ce que je cherchais:

Declare vs. var

varcrée une nouvelle variable. declareest utilisé pour indiquer à TypeScript que la variable a été créée ailleurs. Si vous utilisez declare, rien n'est ajouté au JavaScript qui est généré - c'est simplement un indice pour le compilateur.

Par exemple, si vous utilisez un script externe qui définit var externalModule, vous utiliseriez declare var externalModulepour indiquer le compilateur TypeScript qui externalModulea déjà été configuré

Pour comprendre cela, vous devez d'abord comprendre le mot-clé "declare".

Voici une bonne explication du blog de Gil Fink :

Le mot-clé de déclaration TypeScript est utilisé pour déclarer des variables qui peuvent ne pas provenir d'un fichier TypeScript.

Par exemple, imaginons que nous avons une bibliothèque appelée myLibrary qui n'a pas de fichier de déclaration TypeScript et un 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 le runtime TypeScript donnera à la variable myLibrary est le type any. Le problème ici est que vous n'aurez pas Intellisense pour cette variable au moment de la conception, 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 avec le type any:

var myLibrary: any;

Les deux exemples de code produiront la même sortie JavaScript, mais l'exemple de déclaration est plus lisible et exprime une déclaration ambiante.

Donc, après avoir compris le mot-clé "declare", revenez à 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 en tapuscrit:

Le declaremot-clé dans typescript est utile pour indiquer au compilateur dactylographié qu'une déclaration est définie ailleurs (quelque part écrite 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 dactylographié lèvera une erreur:

foo = 'random'; // Error: 'foo' is not defined

Nous pouvons résoudre ce problème en utilisant le declaremot - clé:

declare var foo: string;
foo = 'random';  // no error anymore

Cela a les conséquences suivantes:

• Lorsqu'il foon'est déclaré nulle part ailleurs et que nous essayons d'utiliser la variable, une erreur d'exécution peut se produire. N'utilisez donc le declaremot - clé que lorsque vous savez que la variable est disponible à ce stade.
• Parce que nous connaissons les types, nous avons (potentiellement) accès à notre IDE Intellisense .
• Parce que nous connaissons les types, le compilateur dactylographié peut vérifier les types au moment de la compilation et peut nous avertir si nous utilisons les mauvais types dans certains scénarios.

Le mot-clé declare dans ce cas précis:

export declare class Actions {
    ...
}

... est apparemment inutile et je pense que TypeScript devrait envisager d'en 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 attendant que quelqu'un l'importe, vous n'avez pas besoin de la déclarer. Et comme vous déclarez cette classe, par définition, cette classe devrait être utilisable sans avoir besoin de l'importer. Mais ce n'est pas vrai lorsque vous exportez déclarez une classe. Vous devez l' importer pour l'utiliser.

TL; DR

export declare class Actions {
    ...
}

est le même que

declare class Actions {
    ...
}

declare - sans aucun mot-clé d'importation ou d'exportation - définit les fichiers de déclaration automatiquement sélectionnés par TypeScript, ce qui est une fonctionnalité utile pour ajouter du typage aux modules hérités (packages installés npm sans définitions TypeScript).

import/ exportest la bonne façon d'utiliser les modules, et tout doit être importé manuellement (et je trouve un peu fastidieux), soit c'est logique, soit c'est des définitions.

Comme cas d'utilisation pratique, export declarevous 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'import externe est le même dans les deux cas (par exemple import { Redux } from 'definitions/redux';), dont je ne sais pas si c'est une bonne pratique ou pas, mais je trouve ça bien rangé! ^^

Il est important de garder à l'esprit que l'ajout d'un importou exportà votre fichier en fera un module, donc la declareportée ne sera plus au niveau global.

PS, il y a un bug ( issue 16671 ): si vous utilisez const enumdans votre déclaration (je le fais pour le type d'actions redux) et que vous avez spécifié le transpileOnlyflag (le package create-react-app-typescript le fait, c'est pourquoi je sais), le enum ne sera pas intégré! Vous pouvez y courir, non, mais il est utile de le savoir à l'avance!