web-dev-qa-db-fra.com

Module d'importation depuis le chemin racine dans TypeScript

Supposons que j'ai un projet et que son répertoire source principal est:

C:\product\src

Sur la base de ce répertoire, chaque chemin d'importation lui serait relatif. I.e., supposons:

// Current script: C:\product\src\com\name\product\blah.ts

import { thing } from '/com/name/product/thing';

pareil que:

// Current script: C:\product\src\com\name\product\blah.ts

import { thing } from '../../../com/name/product/thing';

Mon fichier de compilation d'entrée serait à:

C:\product\src

par exemple. Alors, y at-il un moyen de spécifier ce chemin d’entrée (C:\product\src, par exemple) aux options du compilateur? Je dois spécifier cela dans le fichier tsconfig.json, car je vais utiliser webpack.

J'ai essayé mon exemple ci-dessus, mais TypeScript indique que le module demandé est introuvable:

// Current script: A.ts

import { B } from '/com/B';


// Current script: B.ts

export const B = 0;

Mon fichier tsconfig.json (dans un autre projet, mais les deux similaires):

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noUnusedLocals": true,
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "strictNullChecks": true,
        "target": "ES6"
    },

    "include": [
        "./src/**/*.ts",
        "./src/**/*.d.ts"
    ]
}
typescripttypescript2.0typescript1.8typescript2.1typescript2.2
7
user7536774

(Nouvelle publication de ma réponse pour éviter la prise de chiot.)

À l’aide de la propriété compilerOptions.baseUrl , j’ai pu faire l’importation ci-dessous. Cela m'a permis d'avoir un chemin d'accès complet de la racine à l'attendu, ce qui facilite la maintenance du code et fonctionne dans n'importe quel fichier, indépendamment du dossier en cours. Les exemples ci-dessous auront le dossier src de mon projet en tant que racine des modules.

Conseil important: cette propriété baseUrl n'affecte pas le fichier Webpack d'entrée (du moins pour moi?), Séparez donc un fichier principal du dossier src avec cet exemple et exécutez-le à partir de l'entrée (c'est-à-dire, import { Main } from './src/Main'; new Main;), une seule fois.

// browser: directory inside src;
//   * net: A TS file.
import { URLRequest } from 'browser/net';

tsconfig.json exemple:

{
    "compilerOptions": {
        "baseUrl": "./src",
        "module": "commonjs",
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noUnusedLocals": true,
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "strictNullChecks": true,
        "target": "ES6"
    },

    "include": [
        "./src/**/*.ts",
        "./src/**/*.d.ts"
    ]
}

Cependant, cela ne fonctionnera pas directement avec webpack. La même chose doit être faite avec les options du webpack. Voici comment cela a fonctionné dans le webpack 2:

module.exports = {
  ...
  , resolve: {
      ...
      , modules: [ path.join(__dirname, './src') ]
    }
}
8
user7536774

Les importations TypeScript utilisent / au début d'un chemin pour indiquer le répertoire racine. Pour importer un fichier par rapport à votre fichier actuel, laissez la barre oblique initiale ou utilisez ./. 

// Current script: C:\product\src\com\name\product\blah.ts
import { thing } from './com/name/product/thing';

Par défaut, le compilateur TypeScript suppose que la racine du projet est identique à l'emplacement de votre tsconfig.json. 

Vous pouvez spécifier une nouvelle racine en spécifiant la propriété rootDir de la propriété compilerOptions dans tsconfig. 

Pour obtenir une liste de tous les paramètres de propriété disponibles, consultez la définition de tsconfig trouvée ici . 

7
Teddy Sterne

La solution pour votre instruction d’importation dans thing.ts sera 

import {} './product/blah'

et la structure de votre projet pourrait être aussi 

 enter image description here

Autres options possibles avec explication

J'ai la structure d'application suivante et je la place dans 

C:\\Users\\(username)\\Documents\firstAngular2App 

comme dans la capture d'écran.

 enter image description here

J'importe des composants dans app.module.ts en tant que 

  1. ./ affichera le dossier actuel (app)

    import { } from './';

 enter image description here

  1. ../ fera référence au dossier racine (firstAngular2App-master)

    import { } from '../';

 enter image description here

  1. ../../ fera référence au dossier racine (dossier Documents)

    import { } from '../../';

 enter image description here

  1. ../app/ fait référence au dossier de l'application mais il est référencé à partir de la racine (firstAngular2App)

    import {} from '../app/';

 enter image description here

1
Aravind

J'avais besoin de définir baseUrl et rootDir pour qu'ils pointent vers mon dossier src dans tsconfig.json { "compilerOptions": { "baseUrl": "./src", "rootDir": "./src", ... } Je pouvais ensuite importer des fichiers .tsx sans avoir besoin d'un préfixe '/' ou d'un chemin relatif.

par exemple .import BreadCrumb from 'components/BreadCrumb'

0
Damian Green

Juste pour l'enregistrement

Si vous souhaitez utiliser une importation absolue à partir de votre projet, n'utilisez pas / comme préfixe, tel que /src/config/cfg, utilisez-le simplement comme src/config/cfg.

As https://stackoverflow.com/a/46229294/7529562 pointé, / signifie racine système,

tsc va se plaindre cannot find module

0
toffee