web-dev-qa-db-fra.com

Importer un fichier js avec TypeScript 2.0

Abstrait

J'essaie d'importer le fichier ".js" depuis un emplacement externe (c'est-à-dire node_modules). J'essaie de le faire en utilisant un modèle de module commonjs, mais import ne souhaite pas travailler avec ". js "types de fichier jusqu'à ce que j'ajoute le fichier" .d.ts "près du fichier" .js "dans le même dossier.

Mais le problème est que je ne voudrais pas affecter les node_modules avec mes fichiers ".d.ts". Je veux qu'il soit situé dans un autre dossier, séparé de node_modules mais dès que je le fais, le compilateur TypeScript renvoie une erreur:

Exemple

J'ai la structure de dossier suivante:

|- DTS
|   |- y.d.ts
|- main.ts
|- y.js

y.js a le contenu suivant

module.export = function (x) {
    console.log(x);
};

y.d.ts a le contenu suivant

export interface Y {
    (x): any;
}
declare let y: Y;
export default y;

main.ts a le contenu suivant

import * as y from './y'

Maintenant, quand j'essaye de compiler main.ts avec:

tsc -m commonjs -t ES2015 main.ts

Je vais avoir une erreur:

x.ts(1,20): error TS2307: Cannot find module './y'.

Question

Comment importer des fichiers ".js" et pouvoir définir ses déclarations ".d.ts" tout en disposant les deux fichiers à des emplacements différents.

Modifier

Voici le lien vers un exemple de projet . Veillez à utiliser le compilateur TypeScript version 2.0. Et la commande tsc ci-dessus pour voir l'erreur.

javascriptnode.jstypescripttypescript2.0
17
Lu4

Remarque: La recommandation officielle permettant de prouver vos définitions de type adopte une approche légèrement différente de celle présentée ci-dessous . Je crois que l'approche ci-dessous est légèrement meilleure, car le fichier * .d.ts est pratiquement identique à le produit final.

Pendant la vérification de type (période de construction), TypeScript fonctionne avec les fichiers * .ts et (principalement) ignore les fichiers * .js . Permettez-moi de vous donner un exemple qui motive ce que vous proposez (je crois) . Suppose Il existe une bibliothèque JavaScript parfaite qui ne contient malheureusement pas de texte (par exemple, N3 ). Qui a été installé via npm, ainsi:

npm install n3 --save

Ceci, comme cela est typique, est ajouté à ./node_modules/n3/... et project.json . Comme mentionné, les saisies n’existent pas et doivent être ajoutées manuellement . Je crée un ./@types/n3.d.ts dans ce but. Pour nos besoins, les définitions ne sont pas vraiment importantes, mais voici un bon début:

declare namespace N3 {
}

declare module "n3" {
    export = N3;
}

Passons maintenant à votre question… .. Mettez à jour le fichier 'tsconfig.json':

...
"compilerOptions": {
    "typeRoots": [
      "node_modules/@types",
      "@types"
    ],
...
"paths": {
  "*": [
    ...
    "./@types/*"
  ]

Il sera toujours nécessaire de traiter la résolution à l'exécution pour localiser les fichiers * .js correspondants, mais la question est différente de celle que vous avez posée.

Pour référence, vous pouvez trouver utile Nouveautés de TypeScript Et ce fil de discussion .

Cette approche fonctionne bien lorsque vous utilisez des variables globales, mais pas tellement avec des modules.

Mettez à jour le fichier 'tsconfig.json':

...
"paths": {
  "*": [
    ...
    "./@types/*"
  ],
  "foo": [ "./@types/foo.d.ts" ]
  },
 ...
17
phreed

être capable de définir ses déclarations ".d.ts" tout en ayant les deux fichiers situés à des emplacements différents.

import suit le même processus de résolution de module lorsqu'un fichier .js ou .d.ts avec des fichiers relatifs est attribué. 

0
basarat