发表新帖
发表新帖

TypeScript exports is not defined

后端 未结
关注
6 1650
攒了一身酷
攒了一身酷 2020-12-13 08:45

I\'m trying to use export and import but it not working I get an error

Here is my code HTML :




    <
相关标签:
6条回答
  • 北海茫月
    2020-12-13 09:03

    TypeScript by default uses node module resolution. Node.js / CommonJS uses exports keyword. However, CommonJS doesn't run in browser without a module loader or module bundler. Hence, you need browserify or webpack to get it running in browser.

    Check out this link https://www.typescriptlang.org/docs/handbook/gulp.html

    You can also set module setting to none in compiler options section in tsconfig.json:

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

    0 讨论(0)
  • 醉话见心
    2020-12-13 09:16

    try the following changes

    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"
    ]
  }
}

    with this config your output is only one js file what can be uglified wunderfull, containing all referenced files in the main.ts. i just don't know if ~/ works or if you have to set the path relative to the config file, i'm not working with 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());

    all reference declarations have to be written at the beginning of the file

    0 讨论(0)
  • 無奈伤痛
    2020-12-13 09:16

    Similar to TypedSource's answer, but if you can't or don't want to output into one js file you can do the following:

    <!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 :

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

    main.ts 

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

// import { User } from "./user"; // not needed if referenced & User.js file is loaded
console.log(new User());
    0 讨论(0)
  • 有刺的猬
    2020-12-13 09:20

    You have a couple of options:

    Option 1: Use a module loader like Webpack, Browserify, etc.

    Option 2: If you just want to compile *.ts to *.js without any module imports or exports, set compilerOptions.module to "none" in your tsconfig.json. Note that you won't be able to export/import modules when you set compilerOptions.module to "none".

    0 讨论(0)
  • 南旧
    2020-12-13 09:26

    I now use Parcel to do the ugly stuff of transcoding etc. My easiest config is the following:

    tsconfig.json

    {
    "compilerOptions": {
        "target": "es5",
        "sourceMap": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "lib": [
            "es2015",
            "es5",
            "es6",
            "dom"
        ],
        "noUnusedLocals": true,
        "module": "commonjs",
        "strict": false
    },
    "include": [ "lib/*", "./main.ts" ]
}

    and in your HTML file, instead of importing the '.js', simply import the '.ts', like this:

    <script src="main.ts"></script>

    then, run Parcel with this command line:

    parcel index.html

    the Parcel bundler will create a dist directory containing all your needed files (html and transcoded JavaScript) and it will run a local webserver at:

    http://localhost:1234

    with hot module reloading (in your browser window).

    When you finish your work, you just have to deploy the dist directory ;-)

    0 讨论(0)
  • 春和景丽
    2020-12-13 09:26

    This worked for me:

    my-enum.ts

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

    Component.ts

    import * as MyEnum from 'my-enum';
    0 讨论(0)
 看不清?
提交回复
热议问题