'Cannot redeclare block-scoped variable' dans des fichiers non liés

Question

Il existe un package TS simple qui est utilisé en tant que modules CommonJS et n'a pas d'exports. Les fichiers TS sont compilés en fichiers JS portant le même nom et sont utilisés avec require('package/option-foo').

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5"
  }
}

option-foo.ts:

declare const GlobalVar: any;

function baz() {}

if (GlobalVar.foo) GlobalVar.baz = baz;

option-bar.ts:

declare const GlobalVar: any;

function baz() {}

if (GlobalVar.bar) GlobalVar.baz = baz;

L'élément important ici est que option-foo et option-bar ne sont jamais utilisés ensemble. Il existe d'autres fichiers TS complémentaires dans le projet, mais ils n'affectent rien, ils doivent juste être transpilés en JS dans une seule exécution de tsc.

Lorsque tsc s'exécute, il lance

Impossible de redéclarer la variable de bloc à portée 'GlobalVar'.

Implémentation de fonction en double.

Impossible de redéclarer la variable de bloc à portée 'GlobalVar'.

Implémentation de fonction en double.

pour GlobalVar et baz dans les deux fichiers.

Comment cela peut-il être traité sans compliquer le processus de construction ou la sortie de ces deux fichiers TS ?

Answer 1

TL;DR Il suffit d'écrire export {} dans la portée la plus extérieure de vos fichiers.

---

À un moment donné, il doit y avoir une désambiguïsation sémantique pour savoir si un fichier doit être traité comme un module (et avoir sa propre portée) ou un script (et partager la portée globale avec d'autres scripts).

Dans le navigateur, c'est facile - vous devriez pouvoir utiliser une balise </code> et vous pourrez utiliser des modules.</p> <p>Mais que se passe-t-il pour tout autre endroit utilisant JavaScript? Malheureusement, il n'existe pas actuellement de moyen standard pour faire cette distinction.</p> <p>La manière dont TypeScript a décidé de s'attaquer au problème a été simplement de déclarer qu'un module est <em>tout fichier contenant une instruction d'import ou d'export</em>.</p> <p>Donc si votre fichier ne contient aucune sorte d'instructions <code>import</code> ou <code>export</code> au niveau supérieur, vous verrez parfois des problèmes d'interférences avec les déclarations globales se produire.</p> <p>Pour contourner cela, vous pouvez simplement avoir une instruction <code>export</code> qui n'exporte rien. En d'autres termes, il suffit d'écrire</p> <pre><code>export {}; </code></pre> <p>quelque part au niveau supérieur de votre fichier.</p></x-turndown>

Answer 2

GlobalVar et les fonctions sont exposés à l'espace de noms global, et TypeScript vous avertit que la variable et le nom de la méthode sont redéclarés. Étant donné que les deux fonctions sont déclarées dans l'espace de noms global, vous n'avez besoin de les déclarer qu'une seule fois.

Si vous voulez faire cela, utilisez des espaces de noms.

namespace foo {    
    declare const GlobalVar: any;
    function baz() {}
}

namespace bar {
    declare const GlobalVar: any;
    function baz() {}
}

Vous pouvez appeler les fonctions de la même manière que vous les appelez en C#, en utilisant le nom de l'espace de noms : bar.baz ou foo.baz.

Answer 3

À partir de TypeScript 4.7, cela est résolu via "moduleDetection": "force" dans votre tsconfig.json :

{
  "compilerOptions": {
    // ... Diverses options ici, telles que module ...
    "moduleDetection": "force"
  }
}   

Référence: https://www.typescriptlang.org/tsconfig#moduleDetection

Problème Github original qui a motivé cette configuration : https://github.com/microsoft/TypeScript/issues/14279