web-dev-qa-db-fra.com

Résolution absolue du chemin du module dans les fichiers TypeScript dans VSCode

Je n'arrive pas à convaincre VSCode de résoudre les chemins absolus du module TypeScript. Les chemins relatifs fonctionnent, mais pas absolument. Je voudrais que VSCode résolve les chemins de module de ./src dossier activé.

// this works when source file is in /src/here/there/file.ts
// and importing an interface in /src/api/interfaces.ts
import { Interface } from '../../api/interfaces';

// this doesn't work
import { Interface } from 'api/interfaces';
import { Interface } from '/api/interfaces';
import { Interface } from 'src/api/interfaces';
import { Interface } from '/src/api/interfaces';

// this works but is of course not supposed to be used
import { Interface } from 'c:/..../src/api/interfaces';

Le dernier, bien sûr, ne compte pas, car le cheminement du projet de chaque développeur est très probablement différent. Mais même si nous avions tous défini une variable système %ProjectXRoot% nous ne pouvons pas utiliser cette variable dans le code. VSCode ne résoudra pas ce chemin de module. J'ai essayé.

// won't work
import { Interface } from '%ProjectXRoot%/api/interfaces';

Versions actuellement installées
• TypeScript: 1.8.10
• VSCode: 1.1.1

Question

J'ai essayé de configurer VSCode pour résoudre les chemins de module absolus, mais je n'arrive pas à le faire. J'ai essayé de configurer tsconfig.json (à la racine du projet) en ajoutant baseUrl à deux endroits différents.

{
    ...
    "compilerOptions": {
        "baseUrl": "./src", // doesn't work
        ...
    },
    "baseUrl": "./src", // doesn't work either
    ...
}

J'ai essayé des valeurs comme src, ./src et ./src/ mais aucun d'entre eux ne fonctionne dans aucun des emplacements de configuration supérieurs.

Donc comment configurer VSCode pour résoudre les chemins de module absolus à partir d'un certain dossier?

Si ce n'est pas possible, il serait au moins préférable de résoudre les chemins absolus à partir de la racine du projet. Je ne sais pas comment VSCode détermine cela? Est-ce là où vous Ouvrir le dossier ou est-ce que c'est où le dossier . Vscode? Aucune idée. Mais ce serait toujours une solution viable pour les chemins absolus. J'ai essayé d'utiliser ~ similaire à VS mais en vain non plus.

Modifier (non résolu)

Comme @ steinso souligne dans sa réponse tous les modules commençant par /, ./ ou ../ sont considérés comme relatifs. Surtout le premier m'a complètement surpris car je considère généralement que c'est un chemin relatif à la racine du projet. Mais ce fait signifie essentiellement que la question principale devient maintenant: Comment puis-je fournir des importations de modules en tant que chemins absolus  (à partir de certains projet chemin du dossier racine) du tout? Démarrer des chemins avec des barres obliques signifie généralement absolu, mais dans ce cas, ce n'est pas le cas.

Même lorsque j'ai défini l'option du compilateur moduleResolution sur classic (la résolution du module ne se penchera donc pas sur node_modules dossier) le deuxième ensemble d'importations ci-dessus devrait en fait fonctionner selon le document lié de Microsoft. Mais pour une raison quelconque, je reçois toujours des lignes rouges ondulées dans VSCode et des erreurs lors de la compilation.

Alors, comment puis-je importer un module de projet spécifique sans lui fournir un chemin relatif relatif mais plutôt juste son propre chemin relatif au projet?

moduletypescriptvisual-studio-code
28
Robert Koritnik

Pour pouvoir utiliser les chemins absolus de l'importation dans TypeScript à l'aide de VSCode, vous devez utiliser la prochaine version de TypeScript - TypeScript@next qui est TypeScript v2. Pour cela, procédez comme suit:

  1. Installez TypeScript @ next via npm, pour installer TypeScript v2.x

    npm i TypeScript@next -D

  2. Dans VSCode

    i) goto Fichier> Préférences> Paramètres de l'espace de travail [Cela génère .vscode répertoire à la racine du projet et initialise le settings.json fichier]

    ii) Mettez ce qui suit key:value paire dans settings.json fichier

    "TypeScript.tsdk": "node_modules/TypeScript/lib"

  3. Dans tsconfig.json ajouter la clé suivante: paire de valeurs à 'compilerOptions'

{
  "compilerOptions" : {
    "baseUrl": "./",
    "paths" : {
      "src/*": ["./src/*"]
    }
  }
}
  1. Recharger VSCode

Si vous avez la structure de répertoires suivante:

+ node_modules
+ src
| + app
| |  + shared
| |  |  -service.ts
| |  -main.ts
+ typings
- tsconfig.json
- webpack.config.json
- package.json
- index.html

Ensuite, pour importer /src/app/shared/service.ts de main.ts vous pourriez maintenant import {} from 'src/app/shared/service;

Si vous utilisez webpack et ts-loader pour transpiler le .ts fichiers à ajouter à la section resolve de webpack.config.js fichier de configuration.

resolve: {
    extensions: ['', '.js', '.ts'],
    alias: {
      "src": path.resolve('./src')
    }
  }

Veuillez vous référer à this pour la résolution absolue du module.

21
Lekhnath

Vous devez spécifier:

    "compilerOptions": {
        "moduleResolution": "classic"
        ...

Le chemin de base sera alors par défaut dans le répertoire de votre tsconfig.json, ajoutez rootDir dans compilerOptions pour le changer. EDIT: Cela ne semble pas avoir d'effet.

Cela permettra des importations telles que:

import { Interface } from 'api/interfaces';

Notez que tout chemin commençant par . ou ../ ou / est considéré comme relatif.

Modifier: Résolution du module

Soyez conscient de la façon dont les modules sont résolus. Le chemin du module est encore quelque chose par rapport au fichier actuel.

Prenons un exemple pour illustrer le scénario actuel:

Disons que vous import { Interface } from "api/interfaces", à partir du fichier source /src/views/View.ts. TypeScript rechercherait alors le module dans les chemins suivants:

  1. / src/views/api/interfaces.ts
  2. / src/api/interfaces.ts
  3. / api/interfaces.ts

Remarque: comment cela le rend encore relatif, imaginez si vous import {Home} from "Home/Home" lorsque vous vous trouvez dans /src/views/View.ts. Dans ce cas, cela fonctionnerait même si le chemin d'accès est /src/views/Home/Home.

Ce sont les résolutions possibles:

  1. / src/views/Home/Home -> Notez comment cela fonctionnerait.
  2. / src/Home/Home
  3. / Home/Home

Plus d'informations peuvent être trouvées ici: http://www.typescriptlang.org/docs/handbook/module-resolution.html

6
steinso

Pour ceux qui viennent ici, si vous avez correctement configuré les chemins:

{
  …
  "compilerOptions": {
    …
    "baseUrl": ".",
    "paths": {
      "~/*": ["app/assets/javascript/*"],
      "*": ["node_modules/*", "app/assets/javascript/packs/*"]
    }
  }
}

Et vous rencontrez toujours des problèmes, essayez de recharger vscode: cmd + shift + P et tapez reload window.

Il a juste cessé de fonctionner au hasard pour moi et de signaler des problèmes. J'ai passé environ 20 minutes en ligne à essayer de comprendre ce qui a changé, mais je me suis rendu compte que VS Code peut brouiller la résolution absolue du chemin.

0
RWDJ