web-dev-qa-db-fra.com

Projet TypeScript avec références

J'utilise références de projet pour faire référence à un projet "partagé" de "avant" et "arrière".

tsc -v: Version 3.3.3

Structure du projet: 

./{MY_PROJECT}.code-workspace   /* the only file in this level */
./back
./back/tsconfig.json
./shared/src/
./shared/
./shared/tsconfig.json
./shared/src/
./front
./front/tsconfig.json
./front/src

Je cherche à importer un module dans ./front/src/article-view-model.ts du projet partagé:

import Article from "@shared/src/article";            // alias path
import Article from "../../shared/src/article"; // full relative path
export default class ArticleViewModel {
}

Les erreurs suivantes sont immédiatement affichées dans l'interface graphique de VS Code:

Pour le chemin d'alias:

Impossible de trouver le module '@ shared/src/article'. ts (2307)

Pour un chemin relatif complet:

Le fichier de sortie '../../shared/src/article' n'a pas été créé à partir du fichier source 'c:/{SOMEWHERE_IN_MY_PC} /shared/src/article.ts'. ts (6305)

Intellisense (VS Code) fonctionne pour les options d'alias et relatives:

Intellisense

Si j'essaie d'ignorer les erreurs et de construire, cela échoue avec ça:

C:\Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc.js: 1296 throw e; ^

Erreur: échec du débogage. Fausse expression. à mergeSymbol (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc.js: 25861: 26) à C:\Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc.js: 25960: 47 at Map.forEach () at mergeSymbolTable (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc.js: 25958: 20) at initializeTypeChecker (C :\Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc.js: 48653: 21) sur Object.createTypeChecker (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc.js: 25711: 9) sur getDiagnosticsProducingTypeChecker (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc.js: 71398: 93) sur Object.getGlobalDiagnostics (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc.js: 71755: 72) sur Object.getGlobalDiagnostics (C:\Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc .js: 73528: 86) sur buildSingleProject (C:\Program Files\nodejs\node_modules\npm\bi n\node_modules\TypeScript\lib\tsc.js: 75803: 127)

./ front/tsconfig.json contenu: 

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "baseUrl": ".",
        "module": "AMD",
        "noEmitOnError": true,
        "noImplicitAny": false,
        "out": "./lib/front-bundle.js",
        "paths": {"@shared/*" : ["../shared/*"]},
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "target": "es2015",
        "watch": true
    },
    "include": [
        "./src/**/*.ts",
    ],
    "references": [
        {
            "path": "../shared"
        }
    ]
}

./ contenu partagé/tsconfig.json: 

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "composite": true,
        "declaration": true,
        "module": "AMD",
        "noEmitOnError": true,
        "noImplicitAny": false,
        "out": "./lib/shared-bundle.js",
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "target": "es2015",
        "watch": true
    },
    "include": [
        "./src/**/*.ts",
    ]
}
typescriptproject-structure
11
Dorad

Je l'ai résolu peu après ma dernière activité ici, mais je n'étais pas sûr à 100% si cela s'était produit en raison des changements suivants. Je le poste ici de toute façon, car il y a encore de nouveaux points de vue et votes, donc cela peut être utile pour d'autres:

Ce fut le changement:

In ./ shared/tsconfig.json contents: Au lieu de:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "composite": true,
        "declaration": true,
        "module": "AMD",
        "noEmitOnError": true,
        "noImplicitAny": false,
        "out": "./lib/shared-bundle.js", <-------------
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "target": "es2015",
        "watch": true
    },
    "include": [
        "./src/**/*.ts",
    ]
}

Utilisation:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "composite": true,
        "declaration": true,
        "module": "AMD",
        "noEmitOnError": true,
        "noImplicitAny": false,
        "outDir": "./lib/", <-------------
        "preserveConstEnums": true,
        "removeComments": true,
        "rootDir": "./src", <-------------
        "sourceMap": true,
        "target": "es2015",
        "watch": true
    },
    "include": [
        "./src/**/*.ts",
    ]
}
2
Dorad

Je suis capable de reproduire les erreurs que vous obtenez si J'ai une erreur tsconfig.json dans le répertoire contenant front, back et shared. Dans ce cas, exécutez tsc -b ramassera l'errant tsconfig.json dans le répertoire courant et comme il n'est pas configuré avec le bon paths ou quoi que ce soit d'autre, la compilation échoue avec les mêmes erreurs que vous obtenez.

Sinon, si j'utilise vos fichiers et que j'émets tsc -b front au lieu de tsc -b, il compile sans erreur.

La raison pour laquelle VSCode ne rencontre aucun problème est que, pour assurer la complétion, les éditeurs TypeScript utilisent (normalement) un outil fourni par TypeScript appelé tsserver. Et lorsqu'un éditeur donne un chemin de fichier vers tsserver, tsserver obtient un tsconfig.json en recherchant dans le répertoire contenant le fichier source, puis dans le répertoire parent, et ainsi de suite, jusqu'à ce qu'il trouve un tsconfig.json fichier. Ainsi, lorsque VSCode fonctionne sur front/src/foo.ts et demande à tsserver de fournir un complément, tsserver regarde dans front/src qui n'a pas de fichier correspondant, puis front, et trouve le tsconfig.json Là.

1
Louis

Cela ne répond pas totalement à votre question directement, mais je pense qu'il pourrait être utile d'offrir une alternative.

Une façon de résoudre ce problème de manière "plus standard" serait de faire de vos 3 bases de code un package NPM.

De cette façon, votre import serait quelque chose comme @vendor/shared/foo au lieu de ../../../../shared/src/article.

En utilisant npm link il est facile de travailler sur une interdépendance de projet.

Techniquement, vous n'avez même pas besoin de modifier votre structure source (bien que vous le souhaitiez peut-être). La dépendance shared est simplement liée via node_modules.

0
Evert

Si vous compilez à partir du dossier racine, essayez d'ajouter un fichier local tsconfig.json Avec tout references configuré, c'est-à-dire references: { path: './shared' }. Sinon, tsc ne trouvera pas de projet pertinent à construire.

De plus, le fait de ne pas avoir de racine tsconfig.json Ne permettra pas à l'interface graphique VSCode de fonctionner correctement car elle recherche la racine tsconfig.json (Ce est l'état la dernière fois que je l'ai vérifié, ici vous pouvez trouver le problème connexe ).

L'erreur semble être liée au fichier manquant. Si vous pouvez fournir plus de détails sur les étapes de construction que vous prenez, je peux essayer de mieux le vérifier

0
leonardfactory