web-dev-qa-db-fra.com

Comment configurer des interfaces globales personnalisées (fichiers .d.ts) pour TypeScript?

Je suis aux prises avec ce problème depuis quelques heures et je n'arrive tout simplement pas à trouver quoi que ce soit sur Internet qui expliquerait clairement ce concept soi-disant simple.

Je travaille actuellement sur un projet ReactJS qui utilise Webpack2 et TypeScript. Tout fonctionne parfaitement, mais je ne peux pas trouver le moyen de déplacer les interfaces que j'ai moi-même écrites dans des fichiers séparés afin qu'elles soient visibles par l'ensemble de l'application.

À des fins de prototypage, j'avais initialement défini des interfaces dans des fichiers qui les utilisaient, mais j'ai finalement commencé à en ajouter certaines qui étaient nécessaires dans plusieurs classes et c'est à ce moment-là que tous les problèmes ont commencé. Quels que soient les changements apportés à mon tsconfig.json Et peu importe où je mets les fichiers my IDE et Webpack se plaignent de ne pas pouvoir trouver de noms (Could not find name 'IMyInterface').

Voici mon fichier actuel tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": [
      "es6",
      "dom"
    ],
    "typeRoots": [
      "./node_modules/@types",
      "./typings"
    ],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "types": [
    "typePatches"
  ]
}

Comme vous pouvez le voir, mon tsconfig.json Est à la racine du répertoire du projet, toutes les sources sont dans ./src, J'ai placé mes fichiers personnalisés .d.ts Dans ./typings et inclus dans typeRoots.

Je l'ai testé avec TypeScript 2.1.6 et 2.2.0 et ne fonctionne pas.

Une façon de tout faire fonctionner est de déplacer mon répertoire typings dans src puis import {IMyInterface} from 'typings/blah', Mais cela ne me convient pas, car ce n'est pas quelque chose dont j'ai besoin. utilisation. Je souhaite que ces interfaces soient simplement "magiquement" disponibles dans toute mon application.

Edit: Voici un exemple de fichier app.d.ts:

interface IAppStateProps {
}

interface IAppDispatchProps {
}

interface IAppProps extends IAppStateProps, IAppDispatchProps {
}

Dois-je les export ou peut-être declare? J'espère ne pas devoir les envelopper dans un espace de noms?!

typescripttypescript-typingstypescript2.0typescript1.8
46
Andris

Les "interfaces magiquement disponibles" ou les types globaux sont fortement déconseillés et devraient être laissés en héritage. De même, vous ne devez pas utiliser de fichiers de déclaration ambient (par exemple, d.ts fichiers) pour le code que vous écrivez. Celles-ci sont destinées à remplacer le code externe non-TypeScript (en remplissant essentiellement les types TypeScript dans le code js afin que vous puissiez mieux l'intégrer au javascript).

Pour le code que vous écrivez, vous devriez utiliser plain .ts fichiers pour définir vos interfaces et types.

Bien que les types globaux soient découragés, la réponse à votre problème est qu’il existe deux types de .ts fichiers dans TypeScript. Celles-ci s'appellent scripts et modules.

Tout ce qui se trouve dans un script sera global. Donc, si vous définissez vos interfaces dans un script, celles-ci seront disponibles globalement dans toute votre application (tant que le script est inclus dans la compilation via soit ///<reference path=""> balises ou via files:[] ou includes:[] ou la valeur par défaut **/*.ts dans votre tsconfig.json.

L'autre type de fichier est 'module', et tout ce qui se trouve dans un module sera privé du module. Si vous exportez quoi que ce soit d'un module, il sera disponible pour d'autres modules si ceux-ci ont choisi de l'importer.

Qu'est-ce qui fait un .ts déposer un "script" ou un "module"? Eh bien .... si vous utilisez import/export n'importe où dans le fichier, ce fichier devient un "module". S'il n'y a pas de import/export _ alors il s’agit d’un script global.

Je suppose que vous avez par inadvertance utilisé import ou export dans vos déclarations et en avez fait un module, qui rend toutes vos interfaces privées dans ce module. Si vous souhaitez qu'elles soient globales, assurez-vous de ne pas utiliser les instructions d'importation/exportation dans votre fichier.

98
dtabuenc