web-dev-qa-db-fra.com

Les exportations TypeScript ne sont pas définies

J'essaie d'utiliser les fonctions d'exportation et d'importation, mais cela ne fonctionne pas. Je reçois une erreur.

Voici mon code HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    @RenderBody()

    <script src="~/scripts/user.js"></script>
    <script src="~/scripts/main.js"></script>
</body>
</html>

User.ts:

export class User {
    firstName: string;
    lastName: string;
}

main.ts

import { User } from "./user";

Voici également une capture d'écran de l'exception:

enter image description here

typescriptmodel-view-controller
36
Deontay

Vous avez plusieurs options:

Option 1: Utilisez un chargeur de module tel que Webpack , Browserify, etc.

Option 2: Si vous voulez juste compiler *.ts à *.js sans importer ni exporter de module, définissez compilerOptions.module à "aucun" dans votre tsconfig.json. Notez que vous ne pourrez pas exporter/importer les modules lorsque vous définissez compilerOptions.module à "aucun".

17
Saravana

essayez les modifications suivantes

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    @RenderBody()

    <!-- <script src="~/scripts/user.js"></script> --> <!-- not longer needed -->
    <script src="~/scripts/main.js"></script>
</body>
</html>

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "outFile": "~/scripts/main.js",
    "lib": [
      "dom",
      "es2015",
      "es5",
      "es6"
    ]
  }
}

avec cette configuration, votre sortie n’est qu’un fichier js qui peut être modifié, contenant tous les fichiers référencés dans le fichier main.ts. Je ne sais tout simplement pas si ~/fonctionne ou si vous devez définir le chemin relatif au fichier de configuration, je ne travaille pas avec Linux.

User.ts

class User {
    firstName: string;
    lastName: string;
}

Main.ts:

/// <reference path="User.ts" />

// import { User } from "./user"; // not needed if referenced
console.log(new User());

toutes les déclarations de référence doivent être écrites au début du fichier

14
TypedSource

TypeScript utilise par défaut la résolution du module de nœud. Node.js/CommonJS utilise le mot clé exports . Cependant, CommonJS ne s'exécute pas dans le navigateur sans chargeur de module ou bundler de module. Par conséquent, vous avez besoin de browserify ou de webpack pour le faire fonctionner dans le navigateur.

Consultez ce lien https://www.typescriptlang.org/docs/handbook/gulp.html

Vous pouvez également définir module le paramètre none dans options du compilateur section dans tsconfig.json:

{"compilerOptions": {"target": "es5", "module": "none"}}

4
Ibro

Cela a fonctionné pour moi:

my-enum.ts

const MyEnum = {
'test': 456,
'Default': 123
}

Component.ts

import * as MyEnum from 'my-enum';
0
Yonatan Ayalon